跟我一起学extjs5(32--加入模块和菜单定义[4更新菜单(源码下载)])
程序员文章站
2022-08-10 15:50:19
跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单])
这一节根据后台传递过来的菜单分组和菜单定义,以及模块定义来更新4种类型的菜单。...
跟我一起学extjs5(32--加入模块和菜单定义[4根据后台信息更新菜单])
这一节根据后台传递过来的菜单分组和菜单定义,以及模块定义来更新4种类型的菜单。 按钮菜单和标准菜单的数据格式是一样的,生成的函数都在MainModel.js中,下面将其改一下:
树状菜单也要进行修改:
手风琴式的折叠菜单:
下面看看修改过后的样子:由于现在各个模块分组下的模块都没有加入,只有“系统管理”下有4个模块,因此有些菜单组下是无菜单的。在以后无菜单的菜单组将会被删除。
前几节讲了简单的前后台交互建立系统主页和菜单的例子,在这之前,我把在TZ喎?/kf/ware/vc/" target="_blank" class="keylink">vcMf40/KhsMno1sOhsdbQ09bU9rzTwcvSu9CpxNrI3aO61Pa808HL0ru49r3wtu61pc67z9TKvs671sO1xMno1sOjrNK71tbKx72rvfC27rWlzrvP1Mq+1NrK/SYjMjA1NDA71q6686Osu7nT0NK71tbKx8/Uyr7U2sHQzbfJz6Os1NrK/SYjMjA1NDA71tCyu8/Uyr6howo8aW1nIHNyYz0="/uploadfile/Collfiles/20141001/20141001091024124.png" alt="\"> 源码和数据库的下载地址:https://pan.baidu.com/s/1hqGcnze 这里面包括了到现在为止的所有extjs的修改,java代码,各种配置文件和数据库。jar包如果找不齐的可以下载我的extjs4系列文章中的示例工程,里面都有(由于本人时间有限,工程搭建有问题请自行参照博客解决,祝大家国庆快乐)
这一节根据后台传递过来的菜单分组和菜单定义,以及模块定义来更新4种类型的菜单。 按钮菜单和标准菜单的数据格式是一样的,生成的函数都在MainModel.js中,下面将其改一下:
// 根据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
下面看看修改过后的样子:由于现在各个模块分组下的模块都没有加入,只有“系统管理”下有4个模块,因此有些菜单组下是无菜单的。在以后无菜单的菜单组将会被删除。
前几节讲了简单的前后台交互建立系统主页和菜单的例子,在这之前,我把在TZ喎?/kf/ware/vc/" target="_blank" class="keylink">vcMf40/KhsMno1sOhsdbQ09bU9rzTwcvSu9CpxNrI3aO61Pa808HL0ru49r3wtu61pc67z9TKvs671sO1xMno1sOjrNK71tbKx72rvfC27rWlzrvP1Mq+1NrK/SYjMjA1NDA71q6686Osu7nT0NK71tbKx8/Uyr7U2sHQzbfJz6Os1NrK/SYjMjA1NDA71tCyu8/Uyr6howo8aW1nIHNyYz0="/uploadfile/Collfiles/20141001/20141001091024124.png" alt="\"> 源码和数据库的下载地址:https://pan.baidu.com/s/1hqGcnze 这里面包括了到现在为止的所有extjs的修改,java代码,各种配置文件和数据库。jar包如果找不齐的可以下载我的extjs4系列文章中的示例工程,里面都有(由于本人时间有限,工程搭建有问题请自行参照博客解决,祝大家国庆快乐)
上一篇: vs 发版时,在发版的文件夹中,找不到应该有的某个文件
下一篇: 字符串格式化