[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar

本文地址：http://blog.****.net/sushengmiyan/article/details/39156321

官方例子:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems

本文作者：sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

像Word办公软件一样，我们需要将一些按钮什么的放置在我们办公区域的上方，有时候我们是需要与panel绑定在一起的，这时候，在panel里面设置一个停靠组件toolbar就可以实现。修改Main.js

在学生列表中的panel组件上增加如下：

              dockedItems: [
			    {
				        xtype: 'toolbar',
				        items: [{
                        //xtype : 'gridtoolbar', // 按钮toolbar
                            text : '新增',
                            glyph : 0xf016
                        },{
                            text : '修改',
                            glyph : 0xf044
                        },{
                            text : '删除',
                            glyph : 0xf014
                        },{
                            text : '查看',
                            glyph : 0xf022
                        }],
		                dock: 'top',
			  }], 

显示效果如下：

为了后期维护方便，我们将新加入的这些停靠内容提取成一个类，如下：

/**
 * 提取了一个停靠组件的类，方便维护
 */
Ext.define('oaSystem.view.main.region.GridToolbar', {
            extend : 'Ext.toolbar.Toolbar',
            alias : 'widget.gridtoolbar',
            initComponent : function() {
                this.items = [{
                            text : '新增',
                            glyph : 0xf016,
                        },{
                            text : '修改',
                            glyph : 0xf044
                        },{
                            text : '删除',
                            glyph : 0xf014
                        },{
                            text : '查看',
                            glyph : 0xf022
                        }];
                this.callParent();
            }
});  

在Main.js中引入这个文件：

后期想修改这些内容的话，就直接去main下的region的文件夹下GridToolbar.js文件就可以了。