[ExtJS5學習筆記]第十八節 Extjs5的panel的dockeditems屬性配置toolbar，extjs5dockeditems

[ExtJS5學習筆記]第十八節 Extjs5的panel的dockeditems屬性配置toolbar，extjs5dockeditems

本文地址：http://blog.csdn.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檔案就可以了。