Learn extjs5 with me (32 -- add module and menu Definition [4 Update menu (source code download)]), extjs532 --

Learn extjs5 with me (32 -- add module and menu Definition [4 Update menu (source code download)]), extjs532 --
Learn extjs5 with me (32 -- add module and menu Definition [4 Update menu based on background information])
This section updates four types of menus Based on the menu group and menu definition passed in the background and the module definition. The data format of the button menu is the same as that of the standard menu. The generated functions are all in MainModel. js. Change the format below:

// According to data. tf_MenuGroups: function () {var items = [], me = this; Ext. array. each (this. get ('tf _ MenuGroups '), function (group) {// traverses the array var submenu = [] of menu items; // For each menu item, traverse the array Ext. array. each (group. tf_menuModules, function (menuitem) {// obtain the module definition var module = me according to moduleId. getModuleDefine (menuitem. tf_ModuleId); // if the module exists (or has browsing permission, add it later) if (module) {submenu. push ({mainmenu: 'true', moduleName: module. tf_moduleName, text: module. tf_title, icon: module. tf_icon, glyph: module. tf_glyph, handler: 'onmainmenuclick' // event handler in MainController}) // if the menu defines to separate the next one, add a separator line 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 of the main interface */Ext. define ('app. view. main. menu. mainMenuTree ', {extend: 'ext. tree. panel ', alias: 'widget. mainmenutree ', title: 'System menus', 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 () var 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, // whether the node expands expanded by default: 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 folding menu:

/*** Accordion menu. styles can be beautified by css. */Ext. define ('app. view. main. menu. accordionMainMenu ', {extend: 'ext. panel. panel ', alias: 'widget. mainmenuaccordion ', title: 'System menus', 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.doc kedItems [0]. items. push ({xtype: 'buttontransparent ', text: this. addSpace (module. tf_title, 12), 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 ;}})

Next let's take a look at the changes: As no modules are added to each module group, there are only four modules under "System Management", so some menu groups have no menus. In the future, menus without menus will be deleted.




In the previous sections, we talked about a simple example of frontend and backend interaction to establish the system homepage and menu. Before that, I added some content to the "Settings" in the Top area: you have added a setting for the display position of the amount unit. One is to display the amount unit after the value, and the other is to display it on the column header without displaying it in the value.

Source code and Database: http://pan.baidu.com/s/1hqGcnze here includes all the extjs modifications so far, java code, a variety of configuration files and databases. If the jar package is not properly found, you can download the sample project in my extjs4 series of articles, which contains (because of my limited time, please refer to the blog to solve the problem of project construction, happy National Day)