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

官方例子: 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下的region的文件夹下GridToolbar.js文件就可以了。