Extjs5开发学习-08-自定义菜单1

Extjs5开发学习-08-自定义菜单1顶部和底部区域已经作好，在顶部区域有一个菜单的按钮，这一节我们设计一个菜单的数据结构，使其可以展示出不同样式的菜单。由于准备搭建的是一个系统模块自定义的系统，因此菜单也是自定义的，在操作员系统登录的时候，和MainModel中的其他数据一样，将会通过ajax加载要显示的菜单数据，然后生成菜单条或者菜单树。在这个例子中，我只做了二层菜单，要做三层以上的只要稍作修改即可。下面先来看看菜单数据的定义：在MainModel中，在data属性下定义一个systemMenu的数组属性，下面就放了各个菜单项和菜单条的数据定义。[javascript]viewplaincopy1.//系统菜单的定义，这个菜单可以是从后台通过ajax传过来的2.systemMenu:[{3.text:'工程管理',//菜单项的名称4.icon:'',//菜单顶的图标地址5.glyph:0,//菜单项的图标字体的数值6.expanded:true,//在树形菜单中是否展开7.description:'',//菜单项的描述8.items:[{9.text:'工程项目',//菜单条的名称10.module:'Global',//对应模块的名称11.icon:'',//菜单条的图标地址12.glyph:0xf0f713.//菜单条的图标字体14.},{15.text:'工程标段',16.module:'Project',17.icon:'',18.glyph:0xf02e19.}]20.21.},{22.text:'合同管理',23.expanded:true,24.items:[{25.text:'项目合同',26.module:'Agreement',27.glyph:0xf02d28.},{29.text:'合同付款计划',30.module:'AgreementPlan',31.glyph:0xf03a32.},{33.text:'合同请款单',34.module:'Payment',35.glyph:0xf02236.},{37.text:'合同付款单',38.module:'Payout',39.glyph:0xf0d640.},{41.text:'合同发票',42.module:'Invoice',43.glyph:0xf0a044.}]45.},{46.text:'综合查询',47.glyph:0xf0ce,48.expanded:true,49.items:[{50.text:'项目合同台帐',51.module:'Agreement',52.glyph:0xf02d53.},{54.text:'合同付款计划台帐',55.module:'AgreementPlan',56.glyph:0xf03a57.},{58.text:'合同请款单台帐',59.module:'Payment',60.glyph:0xf02261.},{62.text:'合同付款单台帐',63.module:'Payout',64.glyph:0xf0d665.},{66.text:'合同发票台帐',67.module:'Invoice',68.glyph:0xf0a069.}]70.71.}72.73.]上面菜单中定义了三个菜单项，若干个菜单条，具体的属性上面有说明。有了菜单数据，再编制一个可以根据这些数据生成菜单展示数据的函数，这个函数返回的数组可以直接供toolbar和button作为items和menu来使用。下面这个函数也是在MainModel.js中。[javascript]viewplaincopy1.//根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据2.getMenus:function(){3.varitems=[];4.varmenuData=this.get('systemMenu');//取得定义好的菜单数据5.Ext.Array.each(menuData,function(group){//遍历菜单项的数组6.varsubmenu=[];7.//对每一个菜单项，遍历菜单条的数组8.Ext.Array.each(group.items,function(menuitem){9.submenu.push({10.mainmenu:'true',11.moduleName:menuitem.module,12.text:menuitem.text,13.icon:menuitem.icon,14.glyph:menuitem.glyph,15.handler:'onMainMenuClick'//MainController中的事件处理程序16.})17.})18.varitem={19.text:group.text,20.menu:submenu,21.icon:group.icon,22.glyph:group.glyph23.};24.items.push(item);25.})26.returnitems;27.}下面继承toolbar自定义一个菜单条的控件。在war/app/view/main/region目录下建立文件MainMenuToolbar.js。[javascript]viewplaincopy1./**2.*系统的主菜单条，根据MainModel中的数据来生成，可以切换至按钮菜单，菜单树3.*/4.Ext.define('app.view.main.region.MainMenuToolbar',{5.extend:'Ext.toolbar.Toolbar',6.alias:'widget.mainmenutoolbar',7.8.defaults:{9.xtype:'buttontransparent'10.},11.12.items:[{13.glyph:0xf100,14.tooltip:'在左边栏中显示树状菜单',//几种菜单样式切换的按钮15.disableMouseOver:true,16.margin:'0-500'17.},{18.glyph:0xf102,19.tooltip:'在顶部区域显示菜单',//几种菜单样式切换的按钮20.disableMouseOver:true21.}],22.23.viewModel:'main',//指定viewModel为main24.25.initComponent:function(){26.27.//把ViewModel中生成的菜单items加到此toolbar的items中28.this.items=this.items.concat(this.getViewModel().getMenus());29.30.this.callParent();31.}32.});至此菜单条控件制作完成，下面要把其加入到Main的界面之中。首先在Main.js的uses之中引入'app.view.main.region.MainMenuToolbar'，然后在items中将菜单toolbar加进去。[javascript]viewplaincopy1.items:[{2.xtype:'maintop',3.region:'north'//把他放在最顶上4.},{5.xtype:'mainmenutoolbar',6.region:'north'//把他放在maintop的下面7.},{8.xtype:'mainbottom',9.region:'south'//把他放在最底下10.},{11.region:'center',//中间面版12.xtype:'maincenter'13.}]一个菜单条就加入到了系统之中，来看一下效果。系统中我共设置了4种类型的菜单，分别是：菜单按钮：在顶部的“菜单”按钮之下。菜单条：在顶部区域下面，刚做好的那个就是。菜单树：显示在左边区域的菜单树。折叠式菜单：显示在左边区域的另一种方式。这几种菜单之间可以很方便的切换，如果认为太多了没必要，可以把不喜欢的取消掉。所有的界面都是用控件搭起来的，所以要增加一种菜单风格或取消一种都很方便。