正常功能和子產品自定義系統 (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、屬性綁定、雙向綁定可以從以下圖中看出來。