跟我一起學extjs5(08--自訂菜單1)

跟我一起學extjs5(08--自訂菜單1)

        頂部和底部地區已經作好，在頂部地區有一個菜單的按鈕，這一節我們設計一個菜單的資料結構，使其可以展示出不同樣式的菜單。由於準備搭建的是一個系統模組自訂的系統，因此菜單也是自訂的，在操作員系統登入的時候，和MainModel中的其他資料一樣，將會通過ajax載入要顯示的菜單資料，然後產生菜單條或者菜單樹。在這個例子中，我只做了二層菜單，要做三層以上的只要稍作修改即可。

        下面先來看看菜單資料的定義：在MainModel中，在data屬性下定義一個systemMenu的數組屬性，下面就放了各個功能表項目和菜單條的資料定義。

// 系統功能表的定義，這個菜單可以是從後台通過ajax傳過來的systemMenu : [{text : '工程管理', // 功能表項目的名稱icon : '', // 菜單頂的表徵圖地址glyph : 0,// 功能表項目的表徵圖字型的數值expanded : true, // 在樹形菜單中是否展開description : '', // 功能表項目的描述items : [{text : '工程項目', // 菜單條的名稱module : 'Global', // 對應模組的名稱icon : '', // 菜單條的表徵圖地址glyph : 0xf0f7// 菜單條的表徵圖字型}, {text : '工程標段',module : 'Project',icon : '',glyph : 0xf02e}]}, {text : '合約管理',expanded : true,items : [{text : '項目合約',module : 'Agreement',glyph : 0xf02d}, {text : '合約付款計劃',module : 'AgreementPlan',glyph : 0xf03a}, {text : '合約請款單',module : 'Payment',glyph : 0xf022}, {text : '合約付款單',module : 'Payout',glyph : 0xf0d6}, {text : '合約發票',module : 'Invoice',glyph : 0xf0a0}]}, {text : '綜合查詢',glyph : 0xf0ce,expanded : true,items : [{text : '項目合約台帳',module : 'Agreement',glyph : 0xf02d}, {text : '合約付款計劃台帳',module : 'AgreementPlan',glyph : 0xf03a}, {text : '合約請款單台帳',module : 'Payment',glyph : 0xf022}, {text : '合約付款單台帳',module : 'Payout',glyph : 0xf0d6}, {text : '合約發票台帳',module : 'Invoice',glyph : 0xf0a0}]}]

        上面菜單中定義了三個功能表項目，若干個菜單條，具體的屬性上面有說明。有了菜單資料，再編製一個可以根據這些資料產生菜單展示資料的函數，這個函數返回的數組可以直接供toolbar和button作為items和menu來使用。下面這個函數也是在MainModel.js中。

// 根據data.systemMenu產生菜單條和功能表按鈕下面使用的菜單資料getMenus : function() {var items = [];var menuData = this.get('systemMenu'); // 取得定義好的菜單資料Ext.Array.each(menuData, function(group) { // 遍曆功能表項目的數組var submenu = [];// 對每一個功能表項目，遍曆菜單條的數組Ext.Array.each(group.items, function(menuitem) {submenu.push({mainmenu : 'true',moduleName : menuitem.module,text : menuitem.text,icon : menuitem.icon,glyph : menuitem.glyph,handler : 'onMainMenuClick' // MainController中的事件處理常式})})var item = {text : group.text,menu : submenu,icon : group.icon,glyph : group.glyph};items.push(item);})return items;}

        下面繼承toolbar自訂一個菜單條的控制項。在war/app/view/main/region目錄下建立檔案MainMenuToolbar.js。

/** * 系統的主菜單條，根據MainModel中的資料來產生，可以切換至按鈕菜單，菜單樹 */Ext.define('app.view.main.region.MainMenuToolbar', {extend : 'Ext.toolbar.Toolbar',alias : 'widget.mainmenutoolbar',defaults : {xtype : 'buttontransparent'},items : [{glyph : 0xf100,tooltip : '在左側邊欄中顯示樹狀菜單', // 幾種菜單樣式切換的按鈕disableMouseOver : true,margin : '0 -5 0 0'}, {glyph : 0xf102,tooltip : '在頂部地區顯示菜單',// 幾種菜單樣式切換的按鈕disableMouseOver : true}],viewModel : 'main', // 指定viewModel為maininitComponent : function() {// 把ViewModel中產生的菜單items加到此toolbar的items中this.items = this.items.concat(this.getViewModel().getMenus());this.callParent();}});

        至此菜單條控制項製作完成，下面要把其加入到Main的介面之中。首先在Main.js的uses之中引入

'app.view.main.region.MainMenuToolbar'，然後在items中將菜單toolbar加進去。

items : [{xtype : 'maintop',region : 'north' // 把他放在最頂上}, {xtype : 'mainmenutoolbar',region : 'north' // 把他放在maintop的下面}, {xtype : 'mainbottom',region : 'south' // 把他放在最底下}, {region : 'center', // 中間面版xtype : 'maincenter'}]

        一個菜單條就加入到了系統之中，來看一下效果。

        系統中我共設定了4種類型的菜單，分別是：

• 功能表按鈕：在頂部的選項按鈕之下。
• 菜單條：在頂部地區下面，剛做好的那個就是。
• 菜單樹：顯示在左邊地區的菜單樹。
• 摺疊式菜單：顯示在左邊地區的另一種方式。

這幾種菜單之間可以很方便的切換，如果認為太多了沒必要，可以把不喜歡的取消掉。所有的介面都是用控制項搭起來的，所以要增加一種菜單風格或取消一種都很方便。