[ExtJS5 Study Notes] section 18th configure the toolbar for the dockeditems attribute of the panel of Extjs5

[ExtJS5 Study Notes] section 18th configure the toolbar for the dockeditems attribute of the panel of Extjs5

 

Certificate ------------------------------------------------------------------------------------------------------------------------------------

Like Word office software, we need to place some buttons and things above our office area. Sometimes we need to bind them with the panel. At this time, you can set a toolbar of the dock component in the panel. Modify Main. js

Add the following to the panel component in the student list:

 

DockedItems: [{xtype: 'toolbar', items: [{// xtype: 'gridtoolbar', // button toolbar text: 'add', glyph: 0xf016}, {text: 'modify', glyph: 0xf044}, {text: 'delete', glyph: 0xf014}, {text: 'view', glyph: 0xf022}], dock: 'top',}],

 

The display effect is as follows:

For later maintenance convenience, we extract the newly added dock content into a class, as shown below:

 

/*** Extracts a class of the docking component for convenient maintenance */Ext. define ('oss. view. main. region. gridToolbar ', {extend: 'ext. toolbar. toolbar ', alias: 'widget. gridtoolbar ', initComponent: function () {this. items = [{text: 'add', glyph: 0xf016,}, {text: 'modify', glyph: 0xf044}, {text: 'delete', glyph: 0xf014 }, {text: 'view', glyph: 0xf022}]; this. callParent ();}});

Introduce this file in Main. js:

 

If you want to modify the content later, you can directly go to the GridToolbar. js file in the region folder under main.