ExtJS5_自定义菜单2

浏览数：27 / 时间：2015年06月09日

这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于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种类型的菜单。见下图：