跟我一起学extjs5(09--自己定义菜单2)
这一节来定义另外三种类型的菜单类。
首先定义菜单button类。文件放于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,引入button菜单类
uses : ['app.ux.ButtonTransparent', 'app.view.main.region.ButtonMainMenu'],
然后在items中增加
{
xtype : 'buttonmainmenu'
}
{
xtype : 'mainmenutree',
region : 'west', // 左边面板
width : 250,
split : true
}, {
xtype : 'mainmenuaccordion',
region : 'west', // 左边面板
width : 250,
split : true
},
经过以上处理,如今界面上会有4种类型的菜单。见下图:
版权声明:本文博主原创文章,博客,未经同意不得转载。