常規(guī)功能和模塊自定義系統(tǒng) (cfcmms)—010主界面和菜單的展示和控制(2)

    系統(tǒng)中設置了四種菜單類型，可以相互之間快速轉換，分別為標準菜單、按鈕菜單、樹狀菜單和折疊式菜單，

常規(guī)功能和模塊自定義系統(tǒng) (cfcmms)—010主界面和菜單的展示和控制(2)

。各個菜單位置和轉換方式如下圖：

    各種菜單的菜單項的數(shù)據(jù)源由MainModel.js通過ajax在后臺取得，在MenuModel.js中將菜單數(shù)據(jù)加工后生成可用的菜單數(shù)據(jù)。菜單項的數(shù)據(jù)獲得、生成菜單、展示的過程如下圖：（此處菜單項未用MVVM特性，要用的話也可以，把生成菜單的函數(shù)放在formula中應該就可以了）

   

    菜單的數(shù)據(jù)保存在數(shù)據(jù)表中，菜單可執(zhí)行的任務通常包括打開一個模塊、有附加條件的打開模塊、打開一個綜合查詢、執(zhí)行系統(tǒng)功能，為了系統(tǒng)的可開放性和擴展性，以后會加入對自己開發(fā)函數(shù)和功能的支持。

    按鈕菜單，標準菜單和樹狀菜單三者之間的轉換，使用了MVVM中的特性。在MainModel.js中有一個視圖控制的變量menuType,通過直接改變這個變量的值，通過設置的formulas函數(shù)，就可以來達到隱藏或顯示某種類型的菜單。

   

data : {		menuType : 'tree', // 菜單的位置，'button' , 'toolbar' , 'tree'	},	formulas : {		// 當菜單方式選擇的按鈕按下后，這里的formulas會改變，然后會影響相應的bind的數(shù)據(jù)		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 : '信息面版，左邊的菜單面版，中間的模塊信息顯示區(qū)域',		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, // 系統(tǒng)默認是顯示此樹狀菜單，
電腦資料
《常規(guī)功能和模塊自定義系統(tǒng) (cfcmms)—010主界面和菜單的展示和控制(2)》(http://www.msguai.com)。這里改成true也可以，你就能看到界面顯示好后，再顯示菜單的過程		bind : {			hidden : '{!isTreeMenu}'		}	}, {		region : 'center', // 中間的顯示面版，是一個tabPanel.		xtype : 'maincenter',		reference : 'maincenter'	} ],

    改變menuType的值可以有二種方法，一種直接用viewModel.set('menuType',value)，例如在MainController.js中的以下代碼。

// 顯示菜單條，隱藏左邊菜單區(qū)域和頂部的按鈕菜單。	showMainMenuToolbar : function(button) {		this.getView().getViewModel().set('menuType', 'toolbar');	},	// 顯示左邊菜單區(qū)域,隱藏菜單條和頂部的按鈕菜單。	showLeftMenuRegion : function(button) {		this.getView().getViewModel().set('menuType', 'tree');	},	// 顯示頂部的按鈕菜單,隱藏菜單條和左邊菜單區(qū)域。	showButtonMenu : function(button) {		var view = this.getView();		if (view.down('maintop').hidden) {			// 如果頂部區(qū)域和底部區(qū)域隱藏了，在用按鈕菜單的時候，把他們顯示出來，不然菜單就不見了			view.showOrHiddenToolbar.toggle();		}		view.getViewModel().set('menuType', 'button');	},

二是使用雙向綁定的方法來改變值。在頂部區(qū)域中設置的菜單樣式就這種方法，使用bind值的方式來進行雙向綁定。當menuType被其他地方修改過后，這里的值就會連動；當用戶在這里選擇了一種菜單樣式之后，viewModel中的menuType值就會被修改，而后formulas中和menuType有關的函數(shù)也會被執(zhí)行，和formulas中函數(shù)進行綁定的控件的狀態(tài)就會改變。

text : '菜單樣式',			menu : [ {				xtype : 'segmentedbutton',				bind : {					value : '{menuType}' // 在外界改變了菜單樣式之后，這里會得到反應				},				items : [ {					text : '標準菜單',					value : 'toolbar'				}, {					text : '樹形菜單',					value : 'tree'				}, {					text : '按鈕菜單',					value : 'button'				} ]			} ]

    關于viewModel中的數(shù)據(jù)、formulas、屬性綁定、雙向綁定可以從以下圖中看出來。