ExtJS5_自訂菜單1

標籤：des   style   blog   http   io   color   ar   使用   sp   

頂部和底部地區已經作好，在頂部地區有一個菜單的按鈕，這一節我們設計一個菜單的資料結構，使其可以展示出不同樣式的菜單。由於準備搭建的是一個系統模組自訂的系統，因此菜單也是自訂的，在操作員系統登入的時候，和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為main    initComponent : function() {        // 把ViewModel中產生的菜單items加到此toolbar的items中        this.items = this.items.concat(this.getViewModel().getMenus());        this.callParent();    }});

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

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

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

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

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

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

ExtJS5_自訂菜單1