Learn Extjs5 with me (32--add module and menu definition [4 update menu (source download)])

Learn Extjs5 with me (32--add module and menu definition [4 update menu based on background information])
This section updates 4 types of menus based on the menu groupings and menu definitions passed in the background, as well as module definitions. The data Format for the button menu and the standard menu is the same, and the generated function is in Mainmodel.js, which is changed below:

Based on the data.tf_menugroups generated menu bar and Menu buttons below the menu data used Getmenus:function () {var items = [], me = this; Ext.Array.each (This.get (' tf_menugroups '), function (group) {//traversal of the array of menu items var submenu = [];//for each menu item, Iterate through the menu bar of the array Ext.Array.each (Group.tf_menumodules, Function (MenuItem) {//////ModuleID Get the definition of the module var module = Me.getmoduledefine (Menuitem.tf_moduleid);//If the module exists (or has browse permission, add later) if (module) {Submenu.push ({mainmenu: ' true ', Modulename:module.tf_modulename,text:module.tf_title,icon:module.tf_icon,glyph:module.tf_glyph,handler: ' Event handlers in Onmainmenuclick '//Maincontroller})//If the menu defines the next bar, add a separator line to the menu if (menuitem.tf_addseparator) Submenu.push (' -');}}) var item = {Text:group.tf_title,menu:submenu,icon:group.tf_iconurl,glyph:group.tf_glyph};items.push (item);}) return items;}

The tree menu also needs to be modified:

/** * Tree menu, displayed on the left side of the main interface */ext.define (' App.view.main.menu.MainMenuTree ', {extend: ' Ext.tree.Panel ', alias: ' Widget.mainmenutree ', Title: ' System Menu ', Rootvisible:false,lines:false,initcomponent:function () {This.store = Ext.create (' Ext.data.TreeStore ', {root: {text: ' System menu ', Leaf:false,expanded:true}}); var vm = this.up (' App-main '). Getviewmodel () v AR menus = vm.get (' tf_menugroups '); var root = This.store.getRootNode (); for (var i in menus) {var menugroup = Menus[i];var MenuItem = Root.appendchild ({text:menugroup.tf_title,//node is expanded by default Expanded:menugroup.tf_expand,icon:menugroup.tf_ Iconurl,glyph:menugroup.tf_glyph}); for (Var j in Menugroup.tf_menumodules) {var menumodule = menugroup.tf_menumodules[ J];var module = vm.getmoduledefine (Menumodule.tf_moduleid), if (module) {var childnode = {moduleId:module.tf_moduleId, Modulename:module.tf_modulename,text:module.tf_title,leaf:true};menuitem.appendchild (Childnode);}}} This.callparent (arguments);}})

        accordion-style folding menu:

/** * Folding (accordion) menu, style can be used to beautify their own CSS */ext.define (' App.view.main.menu.AccordionMainMenu ', {extend: ' Ext.panel.Panel ', alias: ' Widget.mainmenuaccordion ', Title: ' System Menu ', layout: {type: ' accordion ', animate:true}, Initcomponent:function () {this.items = [];var vm = this.up (' App-main '). Getviewmodel (); var menus = vm.get (' tf_menugroups  var me = This;for (var i in menus) {var menugroup = Menus[i];var Accpanel = {menuaccordion:true,xtype: ' Panel ', title : Menugroup.tf_title,bodystyle: {padding: ' 10px '},layout: ' Fit ', Dockeditems: [{dock: ' Left ', xtype: ' Toolbar ', items : []}],glyph:menugroup.tf_glyph};for (Var j in Menugroup.tf_menumodules) {var menumodule = menugroup.tf_menumodules[j]; var module = vm.getmoduledefine (Menumodule.tf_moduleid), if (module) {Accpanel.dockeditems[0].items.push ({xtype: ' Buttontransparent ', Text:this.addSpace (Module.tf_title, N), Glyph:module.tf_glyph,handler: ' Onmainmenuclick '});}} This.items.push (Accpanel);} This.callparent (arguments);},addspace:fuNction (text, len) {var result = Text;for (var i = text.length; i < Len; i++) {result + = ';} return result;}})

Here's what it looks like: since the modules under each module are not added, there are only 4 modules under System Management, so there are no menus under the menu groups. Menu groups with no menus will be deleted later.




The first few sections talk about simple front-and-back interaction to build the System home page and menu examples, before I put in the top area "settings" and added something: added an amount unit to display the location of the setting, one is to display the amount units after the value, there is a column header, the value is not displayed.

Source code and database: Http://pan.baidu.com/s/1hqGcnze This includes all the ExtJS modifications to date, Java code, various configuration files and databases. Jar Package If you can download the example project in my EXTJS4 series article, there are (due to my limited time, engineering construction problems, please refer to the blog to solve, I wish you a Happy National day)

Learn Extjs5 with me (32--add module and menu definition [4 update menu (source download)])