这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于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种类型的菜单。见下图：