常规功能和模块自定义系统 (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)》(http://meiwen.anslib.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、属性绑定、双向绑定可以从以下图中看出来。