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

Source: Internet
Author: User

[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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.