[ExtJS5 Study Notes] section 18th of the EXTJS5 Panel dockeditems Property Configuration toolbar

This address: http://blog.csdn.net/sushengmiyan/article/details/39156321

Official Example: Http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems

This article Sushengmiyan

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

Like Word Office software, we need to put some buttons on top of our office area, sometimes we need to be bound together with the panel, this time, in the panel to set a docking component toolbar can be implemented. Modify Main.js

On the panel component in the Student list, add the following:

              Dockeditems: [           {        xtype: ' toolbar ',        items: [{                          //xtype: ' Gridtoolbar ',//button toolbar                              text: ' New ',                               glyph:0xf016                            },{                              text: ' Modify ',                              glyph:0xf044                          },{                              text: ' Delete ',                              glyph:0xf014                          },{< C14/>text: ' View ',                              glyph:0xf022                          }],                dock: ' Top ',  

The display results are as follows:

To facilitate later maintenance, we extracted the newly added docking contents into a class, as follows:

/**  * Extracts a class of docked components for easy maintenance *  /ext.define (' OaSystem.view.main.region.GridToolbar ', {              extend: ' Ext.toolbar.Toolbar ',              alias: ' Widget.gridtoolbar ',              initcomponent:function () {                  This.items = [{                              text : ' New ',                               glyph:0xf016,                            },{                              text: ' Modify ',                              glyph:0xf044                          },{                              text: ' Delete ',                              glyph:0xf014
   },{                              text: ' View ',                              glyph:0xf022                          }];                  This.callparent ();              }  });  

Introduce this file in Main.js:

Later want to modify these content, go directly to main under the folder under the region Gridtoolbar.js file on it.

[ExtJS5 Study Notes] section 18th of the EXTJS5 Panel dockeditems Property Configuration toolbar