[置顶] 常规功能和模块自定义系统 (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, // 系统默认是显示此树状菜单。这里改成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、属性绑定、双向绑定可以从以下图中看出来。