这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于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);
}
})
第三种为折叠式菜单，文件名为AccordionMainMenu.js。
/**
* 折叠式(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;
} })
把这三种类型的菜单加入到页面中。先修改Top.js,引入按钮菜单类
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种类型的菜单。见下图：
