ExtJs-03-带顶部，底部，脚部工具栏的panel

最新推荐文章于 2022-09-26 13:57:51 发布

转载最新推荐文章于 2022-09-26 13:57:51 发布 · 1.8k 阅读

文章标签：

#extjs

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用 ExtJS 创建包含顶部、底部及工具栏的 Panel 组件，并提供了具体的 HTML 和 JavaScript 实现代码示例。顶部工具栏包括两个按钮，底部工具栏包括两个按钮，此外还展示了如何设置 Panel 的工具项。

//4 带顶部，底部，脚部工具栏的panel

HTML：

JS：

            //4 带顶部，底部，脚部工具栏的panel
            var barPanel = Ext.create('Ext.Panel', {
                id: 'barPanel',
                title: '带工具栏的Panel',
                //collapsible: true,
                renderTo: 'barPanel',
                width: 400,
                height: 300,
                tbar: [//顶部工具栏
                    {
                    text: 'button1',
                    handler: function () {
                        Ext.MessageBox.alert("Click", "点击了button1");
                    }
                }, {
                    text: 'button2'
                }
                ],
                bbar: [//底部工具栏
                    {
                    text: 'button3'
                },
                    {
                        text: 'button4'
                    }
                ],
                html: '<p>empty</p>',
                tools: [
                    {
                        id: 'save',
                        title: 'save',
                        text: 'save'
                    },
                    {
                        id: 'help',
                        text: 'help'
                    },
                    {
                        id: 'up',
                        title:'up',
                        text:'up'
                    },
                    {
                        id: 'close',
                        text: 'close',
                        handler: function () {
                            Ext.MessageBox.alert("Click", "点击了Close");
                        }
                    }
                ]
                /*
                buttons: [//footer工具栏
                {
                text:'button5'
                },
                {
                text:'button6'
                }
                ]
                */

});

tools中 id 可以为:

toggle,close,minimize,maximize,restore,gear,pin,unpin,right,left,up,down,refresh,minus,plus,help,search,save,print