跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])
跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单])
// 根据data.tf_MenuGroups生成菜单条和菜单按钮下面使用的菜单数据 getMenus : function() { var items = [], me = this; Ext.Array.each(this.get('tf_MenuGroups'), function(group) { // 遍历菜单项的数组 var submenu = []; // 对每一个菜单项,遍历菜单条的数组 Ext.Array.each(group.tf_menuModules, function(menuitem) { // 根据moduleId取得该模块的定义 var module = me.getModuleDefine(menuitem.tf_ModuleId); // 如果模块存在(或者具有浏览权限,以后加入) if (module) { submenu.push({ mainmenu : 'true', moduleName : module.tf_moduleName, text : module.tf_title, icon : module.tf_icon, glyph : module.tf_glyph, handler : 'onMainMenuClick' // MainController中的事件处理程序 }) // 如果菜单定义了分隔下一条,那么菜单上加一个分隔线 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; }
树状菜单也要进行修改:
/** * 树状菜单,显示在主界面的左边 */ Ext.define('app.view.main.menu.MainMenuTree', { extend : 'Ext.tree.Panel', alias : 'widget.mainmenutree', title : '系统菜单', rootVisible : false, lines : false, initComponent : function() { this.store = Ext.create('Ext.data.TreeStore', { root : { text : '系统菜单', 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, // 节点默认是否展开 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)菜单,样式可以自己用css进行美化 */ Ext.define('app.view.main.menu.AccordionMainMenu', { extend : 'Ext.panel.Panel', alias : 'widget.mainmenuaccordion', title : '系统菜单', 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, 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; } })
下面看看修改过后的样子:由于现在各个模块分组下的模块都没有加入,只有“系统管理”下有4个模块,因此有些菜单组下是无菜单的。在以后无菜单的菜单组将会被删除。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。