8. Teach you Ext5 (eight) Customize menu 2

This section defines three different types of menu classes. First define the menu button class. The file is placed under the App/view/main/region directory, and the file name is buttonmainmenu.js.

/**/ext.define (' App.view.main.region.ButtonMainMenu ', {    ' App.ux.ButtonTransparent ',    ' Widget.buttonmainmenu ',    ' main ',    ' menu ' ,     0xf0c9,    function  () {        This]. Getviewmodel (). Getmenus ();          This . Callparent ();    }})

The second tree-like menu with the file name Mainmenutree.js.

/** * Tree menu, displayed on the left side of the main screen*/Ext.define (' App.view.main.region.MainMenuTree ', {extend:' Ext.tree.Panel ', alias:' Widget.mainmenutree ', Title:' System Menu ', 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            }        }); varMenus = This. Getviewmodel (). Get (' Systemmenu '); varRoot = This. Store.getrootnode ();  for(varIinchmenus) {            varMenugroup =Menus[i]; varMenuItem =Root.appendchild ({text:menugroup.text, expanded:menugroup.expanded, I            Con:menugroup.icon, glyph:menugroup.glhpy});  for(varJinchmenugroup.items) {varMenumodule =Menugroup.items[j]; varChildnode ={moduleId:menumodule.text, moduleName:menumodule.module, Text:menumodule.text, Leaf:true                };            Menuitem.appendchild (Childnode); }        }         This. Callparent (arguments); }})

The third type is a folding menu, with the file name Accordionmainmenu.js.

/** * Folding (Accordion) menu, style can be used to beautify their own CSS*/Ext.define (' App.view.main.region.AccordionMainMenu ', {extend:' Ext.panel.Panel ', alias:' Widget.mainmenuaccordion ', Title:' System Menu ', Glyph:0xf0c9, layout: {type:' Accordion ', animate:true}, ViewModel:' Main ', InitComponent:function () {         This. Items = []; varMenus = This. Getviewmodel (). Get (' Systemmenu ');  for(varIinchmenus) {            varMenugroup =Menus[i]; varAccpanel ={menuaccordion:true, Xtype:' Panel ', Title:menugroup.text, bodystyle: {padding:' 10px '}, Layout:' Fit ', Dockeditems: [{dock:' Left ', Xtype:' Toolbar ', items: []}], glyph:menugroup.glyph};  for(varJinchmenugroup.items) {varMenumodule =Menugroup.items[j]; accpanel.dockeditems[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); varresult =text;  for(vari = text.length; i < Len; i++) {result+ = "; }        returnresult; }})

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

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

Then add the items in the

{    ' Buttonmainmenu '}

Modify Main.js, introduce Mainmenutree and Accordionmainmenu, add in Items

{      ' mainmenutree ',      //  left panel      width:250,        True  }, {      ' mainmenuaccordion ',      //  left panel      width:250,      true  },  

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

8. Teach you Ext5 (eight) Customize menu 2