本文地址：[http://blog.csdn.net/sushengmiyan/article/details/39156321](http://blog.csdn.net/sushengmiyan/article/details/39156321) 官方例子:[?http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems)[](http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each) 本文作者：[sushengmiyan](http://blog.csdn.net/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文件就可以了。