常规功能和模块自定义系统 (cfcmms)—010主界面和菜单的展示和控制(2)
系统中设置了四种菜单类型，可以相互之间快速转换，分别为标准菜单、按钮菜单、树状菜单和折叠式菜单，
常规功能和模块自定义系统 (cfcmms)—010主界面和菜单的展示和控制(2)
。各个菜单位置和转换方式如下图：各种菜单的菜单项的数据源由MainModel.js通过ajax在后台取得，在MenuModel.js中将菜单数据加工后生成可用的菜单数据。菜单项的数据获得、生成菜单、展示的过程如下图：（此处菜单项未用MVVM特性，要用的话也可以，把生成菜单的函数放在formula中应该就可以了）
菜单的数据保存在数据表中，菜单可执行的任务通常包括打开一个模块、有附加条件的打开模块、打开一个综合查询、执行系统功能，为了系统的可开放性和扩展性，以后会加入对自己开发函数和功能的支持。
按钮菜单，标准菜单和树状菜单三者之间的转换，使用了MVVM中的特性。在MainModel.js中有一个视图控制的变量menuType,通过直接改变这个变量的值，通过设置的formulas函数，就可以来达到隐藏或显示某种类型的菜单。
data : { menuType : 'tree', // 菜单的位置，'button' , 'toolbar' , 'tree' }, formulas : { // 当菜单方式选择的按钮按下后，这里的formulas会改变，然后会影响相应的bind的数据 isButtonMenu : function(get) { return get('menuType') == 'button'; }, isToolbarMenu : function(get) { return get('menuType') == 'toolbar'; }, isTreeMenu : function(get) { return get('menuType') == 'tree'; } }在Main.js中，下面片断中将formulas的结果绑定到了各种菜单类型是否显示之上。items : [ { xtype : 'maintop', title : '信息面版，左边的菜单面版，中间的模块信息显示区域', region : 'north' // 把它放在最顶上 }, { xtype : 'mainmenutoolbar', region : 'north', // 把他放在maintop的下面 hidden : true, // 默认隐藏 bind : { hidden : '{!isToolbarMenu}' // 如果不是标准菜单就隐藏 } }, { xtype : 'mainbottom', region : 'south' // 把它放在最底下 }, { xtype : 'mainmenuregion', reference : 'mainmenuregion', region : 'west', // 左边面板 width : 220, collapsible : true, split : true, hidden : false, // 系统默认是显示此树状菜单，电脑资料
《常规功能和模块自定义系统 (cfcmms)—010主界面和菜单的展示和控制(2)》(https://www.unjs.com)。这里改成true也可以，你就能看到界面显示好后，再显示菜单的过程 bind : { hidden : '{!isTreeMenu}' } }, { region : 'center', // 中间的显示面版，是一个tabPanel. xtype : 'maincenter', reference : 'maincenter' } ],改变menuType的值可以有二种方法，一种直接用viewModel.set('menuType',value)，例如在MainController.js中的以下代码。
// 显示菜单条，隐藏左边菜单区域和顶部的按钮菜单。 showMainMenuToolbar : function(button) { this.getView().getViewModel().set('menuType', 'toolbar'); }, // 显示左边菜单区域,隐藏菜单条和顶部的按钮菜单。 showLeftMenuRegion : function(button) { this.getView().getViewModel().set('menuType', 'tree'); }, // 显示顶部的按钮菜单,隐藏菜单条和左边菜单区域。 showButtonMenu : function(button) { var view = this.getView(); if (view.down('maintop').hidden) { // 如果顶部区域和底部区域隐藏了，在用按钮菜单的时候，把他们显示出来，不然菜单就不见了 view.showOrHiddenToolbar.toggle(); } view.getViewModel().set('menuType', 'button'); },二是使用双向绑定的方法来改变值。在顶部区域中设置的菜单样式就这种方法，使用bind值的方式来进行双向绑定。当menuType被其他地方修改过后，这里的值就会连动；当用户在这里选择了一种菜单样式之后，viewModel中的menuType值就会被修改，而后formulas中和menuType有关的函数也会被执行，和formulas中函数进行绑定的控件的状态就会改变。text : '菜单样式', menu : [ { xtype : 'segmentedbutton', bind : { value : '{menuType}' // 在外界改变了菜单样式之后，这里会得到反应 }, items : [ { text : '标准菜单', value : 'toolbar' }, { text : '树形菜单', value : 'tree' }, { text : '按钮菜单', value : 'button' } ] } ]关于viewModel中的数据、formulas、属性绑定、双向绑定可以从以下图中看出来。