跟我一起学extjs5(08--自己定义菜单1)
跟我一起学extjs5(08--自己定义菜单1)
顶部和底部区域已经作好,在顶部区域有一个菜单的button。这一节我们设计一个菜单的数据结构,使其能够展示出不相同式的菜单。因为准备搭建的是一个系统模块自己定义的系统,因此菜单也是自己定义的,在操作员系统登录的时候,和MainModel中的其它数据一样,将会通过ajax载入要显示的菜单数据。然后生成菜单栏或者菜单树。在这个样例中,我仅仅做了二层菜单。要做三层以上的仅仅要稍作改动就可以。
以下先来看看菜单数据的定义:在MainModel中。在data属性下定义一个systemMenu的数组属性,以下就放了各个菜单项和菜单栏的数据定义。
// 系统菜单的定义。这个菜单能够是从后台通过ajax传过来的 systemMenu : [{ text : 'project管理', // 菜单项的名称 icon : '', // 菜单顶的图标地址 glyph : 0,// 菜单项的图标字体的数值 expanded : true, // 在树形菜单中是否展开 description : '', // 菜单项的描写叙述 items : [{ text : 'project项目', // 菜单栏的名称 module : 'Global', // 相应模块的名称 icon : '', // 菜单栏的图标地址 glyph : 0xf0f7 // 菜单栏的图标字体 }, { text : 'project标段', module : 'Project', icon : '', glyph : 0xf02e }] }, { text : '合同管理', expanded : true, items : [{ text : '项目合同', module : 'Agreement', glyph : 0xf02d }, { text : '合同付款计划', module : 'AgreementPlan', glyph : 0xf03a }, { text : '合同请款单', module : 'Payment', glyph : 0xf022 }, { text : '合同付款单', module : 'Payout', glyph : 0xf0d6 }, { text : '合同发票', module : 'Invoice', glyph : 0xf0a0 }] }, { text : '综合查询', glyph : 0xf0ce, expanded : true, items : [{ text : '项目合同台帐', module : 'Agreement', glyph : 0xf02d }, { text : '合同付款计划台帐', module : 'AgreementPlan', glyph : 0xf03a }, { text : '合同请款单台帐', module : 'Payment', glyph : 0xf022 }, { text : '合同付款单台帐', module : 'Payout', glyph : 0xf0d6 }, { text : '合同发票台帐', module : 'Invoice', glyph : 0xf0a0 }] } ]
上面菜单中定义了三个菜单项。若干个菜单栏。详细的属性上面有说明。有了菜单数据。再编制一个能够依据这些数据生成菜单展示数据的函数,这个函数返回的数组能够直接供toolbar和button作为items和menu来使用。以下这个函数也是在MainModel.js中。
// 依据data.systemMenu生成菜单栏和菜单button以下使用的菜单数据 getMenus : function() { var items = []; var menuData = this.get('systemMenu'); // 取得定义好的菜单数据 Ext.Array.each(menuData, function(group) { // 遍历菜单项的数组 var submenu = []; // 对每个菜单项。遍历菜单栏的数组 Ext.Array.each(group.items, function(menuitem) { submenu.push({ mainmenu : 'true', moduleName : menuitem.module, text : menuitem.text, icon : menuitem.icon, glyph : menuitem.glyph, handler : 'onMainMenuClick' // MainController中的事件处理程序 }) }) var item = { text : group.text, menu : submenu, icon : group.icon, glyph : group.glyph }; items.push(item); }) return items; }
以下继承toolbar自己定义一个菜单栏的控件。在war/app/view/main/region文件夹下建立文件MainMenuToolbar.js。
/** * 系统的主菜单栏,依据MainModel中的数据来生成,能够切换至button菜单,菜单树 */ Ext.define('app.view.main.region.MainMenuToolbar', { extend : 'Ext.toolbar.Toolbar', alias : 'widget.mainmenutoolbar', defaults : { xtype : 'buttontransparent' }, items : [{ glyph : 0xf100, tooltip : '在左边栏中显示树状菜单', // 几种菜单样式切换的button disableMouseOver : true, margin : '0 -5 0 0' }, { glyph : 0xf102, tooltip : '在顶部区域显示菜单',// 几种菜单样式切换的button disableMouseOver : true }], viewModel : 'main', // 指定viewModel为main initComponent : function() { // 把ViewModel中生成的菜单items加到此toolbar的items中 this.items = this.items.concat(this.getViewModel().getMenus()); this.callParent(); } });
至此菜单栏控件制作完毕,以下要把其增加到Main的界面之中。首先在Main.js的uses之中引入
'app.view.main.region.MainMenuToolbar'。然后在items中将菜单toolbar加进去。
items : [{ xtype : 'maintop', region : 'north' // 把他放在最顶上 }, { xtype : 'mainmenutoolbar', region : 'north' // 把他放在maintop的以下 }, { xtype : 'mainbottom', region : 'south' // 把他放在最底下 }, { region : 'center', // 中间面版 xtype : 'maincenter' }]
一个菜单栏就增加到了系统之中,来看一下效果。
系统中我共设置了4种类型的菜单,各自是:
- 菜单button:在顶部的“菜单”button之下。
- 菜单栏:在顶部区域以下,刚做好的那个就是。
- 菜单树:显示在左边区域的菜单树。
- 折叠式菜单:显示在左边区域的还有一种方式。
这几种菜单之间能够非常方便的切换,假设觉得太多了不是必需,能够把不喜欢的取消掉。全部的界面都是用控件搭起来的,所以要添加一种菜单风格或取消一种都非常方便。