首页 > 代码库 > ExtJS5_自定义菜单2
ExtJS5_自定义菜单2
这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于app/view/main/region目录下面，文件名为ButtonMainMenu.js。
/** * 显示在顶部的按钮菜单，可以切换至标准菜单，菜单树 */Ext.define(‘app.view.main.region.ButtonMainMenu‘, { extend : ‘app.ux.ButtonTransparent‘, alias : ‘widget.buttonmainmenu‘, viewModel : ‘main‘, text : ‘菜单‘, glyph : 0xf0c9, initComponent : function() { this.menu = this.getViewModel().getMenus(); this.callParent(); }})
第二种树状菜单，文件名为MainMenuTree.js。
/*** 树状菜单，显示在主界面的左边*/Ext.define(‘app.view.main.region.MainMenuTree‘, { extend : ‘Ext.tree.Panel‘, alias : ‘widget.mainmenutree‘, title : ‘系统菜单‘, glyph : 0xf0c9, rootVisible : false, lines : true, viewModel : ‘main‘, initComponent : function() { this.store = Ext.create(‘Ext.data.TreeStore‘, { root : { text : ‘系统菜单‘, leaf : false, expanded : true } }); var menus = this.getViewModel().get(‘systemMenu‘); var root = this.store.getRootNode(); for (var i in menus) { var menugroup = menus[i]; var menuitem = root.appendChild({ text : menugroup.text, expanded : menugroup.expanded, icon : menugroup.icon, glyph : menugroup.glhpy }); for (var j in menugroup.items) { var menumodule = menugroup.items[j]; var childnode = { moduleId : menumodule.text, moduleName : menumodule.module, text : menumodule.text, leaf : true }; menuitem.appendChild(childnode); } } this.callParent(arguments); }})
/*** 折叠式(accordion)菜单，样式可以自己用css进行美化*/Ext.define(‘app.view.main.region.AccordionMainMenu‘, { extend : ‘Ext.panel.Panel‘, alias : ‘widget.mainmenuaccordion‘, title : ‘系统菜单‘, glyph : 0xf0c9, layout : { type : ‘accordion‘, animate : true }, viewModel : ‘main‘, initComponent : function() { this.items = []; var menus = this.getViewModel().get(‘systemMenu‘); for (var i in menus) { var menugroup = menus[i]; var accpanel = { menuAccordion : true, xtype : ‘panel‘, title : menugroup.text, bodyStyle : { padding : ‘10px‘ }, layout : ‘fit‘, dockedItems : [{ dock : ‘left‘, xtype : ‘toolbar‘, items : [] }], glyph : menugroup.glyph }; for (var j in menugroup.items) { var menumodule = 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); var result = text; for (var i = text.length; i < len; i++) { result += ‘ ‘; } return result; }})
uses : [‘app.ux.ButtonTransparent‘, ‘app.view.main.region.ButtonMainMenu‘],
然后在items中加入
{ xtype : ‘buttonmainmenu‘}
再修改Main.js，引入MainMenuTree 和 AccordionMainMenu，在items中加入
{ xtype : ‘mainmenutree‘, region : ‘west‘, // 左边面板 width : 250, split : true}, { xtype : ‘mainmenuaccordion‘, region : ‘west‘, // 左边面板 width : 250, split : true},
经过以上处理，现在界面上会有4种类型的菜单。见下图：
ExtJS5_自定义菜单2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。