Extjs5开发学习-10-使用MVVM特性控制菜单样式

《Extjs5开发学习-10-使用MVVM特性控制菜单样式》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Extjs5开发学习JO-使用MVVM特性控制菜单样式菜单的样式多了，怎么可以灵活的切换是个问题。在使用标准菜单的时候,在菜单最前面有二个按钮,可以切换到树状菜单和按钮菜单。工程项目合同及资金管理系统(5201406.601首页丨帮助关工程管理▼合同管理▼同综合査询▼在树状菜单的显示区，可以切换换到标准菜单，以及折叠式菜单。工乍呈项目合同及资金管理系统(5.2014.06.60)首页©-坐程项目合同及资金管理系统'52014.0660)首页'导航菜单工程管理x工程合同X系统菜单工程管理切换到折査菜单后合同管理切换到按钮菜单之后:切换菜单

2、切换到标准菜单和树状菜单，需要在设置里面进行操作。Ext.deftneC^spp.view.Mtn.menu・MatnMefUjT8lba「・・{extend:*ExtTtoolbarJToolbertoliat:fidget・fiointiGmjtoolbo「■‘”図示W■就左边壊单区壊雲琐曲的檢朋袅・・sho^MoinMenuTgoIbar:funetion(button){this.getVier().getVicv^odcl().setC'incnu"defaults:{xtype!•buttontronsporenf}.ite

3、ms:[{glyph:6x1100,tooltip;■咬左边程中S^WUM*disableHouseOver;true,norgtn:5・5O0handler:*showteftMenuRegion*1.垃击比按tfi・执fTController中的谄数//显示&边JU单区MLIWUR第条和U58S的按慢口单.shonLeftMenuRegion:function(button){2•设fiModel中的menuType.value的figtree'19为tree'tree//矗承]艰的捲单鋼粗钏仏区域shonButtonMenu:

4、function(bu^on){this.jetVie<>.button*);glyph,;Axf162,wOv^r:true,^ho^ButtorMcnuformulasMainController.js:'rGinmenuregion*,h,«rest//:•导給束竿J!//hidden:Cookies.get('apidth;228,collapsible:true,iplit:true,itdden:true,ind:{hidden:•{HsTreeMenu}•isButtonMenu:functiaMqet){returnQ

5、et(*meruTynjfrvolue•)■■'button*;isToolbarMenureturnget(}.ABnction(get)uType.value*.tool6isTreeWenu:function(gct){_"八returngetCnenuType.value・tree*;}

6、3-model中设豆了formulas,会根据值的交化交产生新的徴.这个值用来控脇#个控件的可视性F面分别来看看是如何实现的。由于内部处理比较复杂，我就画一张大图了,源代码稍后也会发布在csdn中。・施统的根期MdnModel中的歓J!来生戒.

7、可以切揍至技田W,现在看看设置里面改变菜单样式的那个控件的运行图。•5示在ib詔的可以切*虽标•/Ext.defineCopp・view.Biain.menu・SettingMenu・fextend:vapp・ux・ButtonTronsparent・.alias:'widget・settings皀nu・■1・此控件希要有value.关联到ImenuType的vohje■丿2•当用户选择了一个新的样或按钮以后.僉改变此控件的valued时也会自动改变Model中的menuType的volue肩—菜单样式menuType:{value:"

8、toolbar・//*MEJB'button3・vakje值改变以text:•菓单样式Jmenu:[{xtype:Jsegmentedbuttonlreference:•menuType*//defaultUI:・default*tvalue:•toolbar*titems:[{text:•标准栗单•.value:*toolbar・formulas:{text:•侑形昨value:*tree}.{text:value:}]}]})this.coUParent();}*butt4•綁定formulas中的函数的控件的属性就会发生相应的变化

9、.将会隐厳或显示菜单控件，流程见上图］后，下面这三个formulas的值都会发严I){J'button*:isButtonMenul^functionCget)returngetCmenuType-valu