Learn extjs5 with me (09 -- custom menu 2)

Learn extjs5 with me (09 -- custom menu 2)
This section defines three other types of menu classes. First, define the menu button class. The file is stored in the app/view/main/region directory. The file name is ButtonMainMenu. js.

/*** The button menu displayed on the top. You can switch to the standard menu, menu tree */Ext. define ('app. view. main. region. buttonMainMenu ', {extend: 'app. ux. buttonTransparent ', alias: 'widget. buttonmainmenu ', viewModel: 'main', text: 'menu', glyph: 0xf0c9, initComponent: function () {this. menu = this. getViewModel (). getMenus (); this. callParent ();}})

The second tree menu is named MainMenuTree. js.

/*** Tree menu, displayed on the left of the main interface */Ext. define ('app. view. main. region. mainMenuTree ', {extend: 'ext. tree. panel ', alias: 'widget. mainmenutree ', title: 'System menus', glyph: 0xf0c9, rootVisible: false, lines: true, viewModel: 'main', initComponent: function () {this. store = Ext. create ('ext. data. treestore', {root: {text: 'System menu ', leaf: false, expanded: true}); var menus = this. getViewModel (). get ('systemmenu '); var root = this. store. getRootNode (); for (var I in menus) {var menugroup = menus [I]; var menuitem = root. appendChild ({text: menugroup. text, expanded: menugroup. expanded, icon: menugroup. icon, glyph: menugroup. glhpy}); for (var j in menugroup. items) {var menumodule = menugroup. items [j]; var childnode = {moduleId: menumodule. text, moduleName: menumodule. module, text: menumodule. text, leaf: true}; menuitem. appendChild (childnode) ;}} this. callParent (arguments );}})

The third type is the fold-over menu, with the file name being AccordionMainMenu. js.

/*** Accordion menu. styles can be beautified by css. */Ext. define ('app. view. main. region. accordionMainMenu ', {extend: 'ext. panel. panel ', alias: 'widget. mainmenuaccordion ', title: 'System menus', glyph: 0xf0c9, layout: {type: 'accordion', animate: true}, viewModel: 'main', initComponent: function () {this. items = []; var menus = this. getViewModel (). get ('systemmenu '); for (var I in menus) {var menugroup = menus [I]; var accpanel = {menuAccordion: true, xtype: 'panel', title: menugroup. text, bodyStyle: {padding: '10px '}, layout: 'fit', dockedItems: [{dock: 'left', xtype: 'toolbar', items: []}], glyph: menugroup. glyph}; for (var j in menugroup. items) {var menumodule = menugroup.items?j=?accpanel.doc kedItems [0]. items. push ({xtype: 'buttontransparent ', text: this. addSpace (menumodule. text, 12), glyph: menumodule. glyph, handler: 'onmainmenuclick'});} this. items. push (accpanel);} this. callParent (arguments) ;}, addSpace: function (text, len) {console. log (text. length); var result = text; for (var I = text. length; I <len; I ++) {result + = '';} return result ;}})

Add these three types of menus to the page. First, modify Top. js and introduce the button menu class.

uses : ['app.ux.ButtonTransparent', 'app.view.main.region.ButtonMainMenu'],

Then add it to items

{xtype : 'buttonmainmenu'}

Modify Main. js, introduce MainMenuTree and AccordionMainMenu, and add
 

{Xtype: 'mainmenutree ', region: 'west', // width: 250, split: true}, {xtype: 'mainmenuaccordion', region: 'west ', // width: 250, split: true },

After the above processing, there are now four types of menus on the interface. See: