ExtJS5_自訂菜單2

標籤：style   blog   http   io   color   ar   sp   for   檔案   

這一節來定義另外三種類型的菜單類。首先定義功能表按鈕類。檔案放於app/view/main/region目錄下面，檔案名稱為ButtonMainMenu.js。

/** * 顯示在頂部的按鈕菜單，可以切換至標準菜單，菜單樹 */Ext.define(‘app.view.main.region.ButtonMainMenu‘, {    extend : ‘app.ux.ButtonTransparent‘,    alias : ‘widget.buttonmainmenu‘,    viewModel : ‘main‘,    text : ‘菜單‘,    glyph : 0xf0c9,    initComponent : function() {        this.menu = this.getViewModel().getMenus();        this.callParent();    }})

第二種樹狀菜單，檔案名稱為MainMenuTree.js。

/*** 樹狀菜單，顯示在主介面的左邊*/Ext.define(‘app.view.main.region.MainMenuTree‘, {    extend : ‘Ext.tree.Panel‘,    alias : ‘widget.mainmenutree‘,    title : ‘系統功能表‘,    glyph : 0xf0c9,    rootVisible : false,    lines : true,    viewModel : ‘main‘,    initComponent : function() {        this.store = Ext.create(‘Ext.data.TreeStore‘, {                    root : {                        text : ‘系統功能表‘,                        leaf : false,                        expanded : true                    }                });        var menus = this.getViewModel().get(‘systemMenu‘);        var root = this.store.getRootNode();        for (var i in menus) {            var menugroup = menus[i];            var menuitem = root.appendChild({                        text : menugroup.text,                        expanded : menugroup.expanded,                        icon : menugroup.icon,                        glyph : menugroup.glhpy                    });            for (var j in menugroup.items) {                var menumodule = menugroup.items[j];                var childnode = {                    moduleId : menumodule.text,                    moduleName : menumodule.module,                    text : menumodule.text,                    leaf : true                };                menuitem.appendChild(childnode);            }        }        this.callParent(arguments);    }})

第三種為摺疊式菜單，檔案名稱為AccordionMainMenu.js。

/*** 摺疊式(accordion)菜單，樣式可以自己用css進行美化*/Ext.define(‘app.view.main.region.AccordionMainMenu‘, {    extend : ‘Ext.panel.Panel‘,    alias : ‘widget.mainmenuaccordion‘,    title : ‘系統功能表‘,    glyph : 0xf0c9,    layout : {        type : ‘accordion‘,        animate : true    },    viewModel : ‘main‘,    initComponent : function() {        this.items = [];        var menus = this.getViewModel().get(‘systemMenu‘);        for (var i in menus) {            var menugroup = menus[i];            var accpanel = {                menuAccordion : true,                xtype : ‘panel‘,                title : menugroup.text,                bodyStyle : {                    padding : ‘10px‘                },                layout : ‘fit‘,                dockedItems : [{                            dock : ‘left‘,                            xtype : ‘toolbar‘,                            items : []                        }],                glyph : menugroup.glyph            };            for (var j in menugroup.items) {                var menumodule = menugroup.items[j];                accpanel.dockedItems[0].items.push({                            xtype : ‘buttontransparent‘,                            text : this.addSpace(menumodule.text, 12),                            glyph : menumodule.glyph,                            handler : ‘onMainMenuClick‘                        });            }            this.items.push(accpanel);        }        this.callParent(arguments);    },    addSpace : function(text, len) {        console.log(text.length);        var result = text;        for (var i = text.length; i < len; i++) {            result += ‘　‘;        }        return result;    }})

把這三種類型的菜單加入到頁面中。先修改Top.js,引入按鈕菜單類

uses : [‘app.ux.ButtonTransparent‘, ‘app.view.main.region.ButtonMainMenu‘],

然後在items中加入

{    xtype : ‘buttonmainmenu‘}

再修改Main.js，引入MainMenuTree 和 AccordionMainMenu，在items中加入

{    xtype : ‘mainmenutree‘,    region : ‘west‘, // 左邊面板    width : 250,    split : true}, {    xtype : ‘mainmenuaccordion‘,    region : ‘west‘, // 左邊面板    width : 250,    split : true},

經過以上處理，現在介面上會有4種類型的菜單。見：

ExtJS5_自訂菜單2