8、手把手教你Extjs5（八）自定义菜单2

最新推荐文章于 2016-09-25 10:31:14 发布

转载最新推荐文章于 2016-09-25 10:31:14 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/niejunchan/p/4996903.html

文章标签：

#ux

本文详细介绍了使用ExtJS框架创建三种不同类型的菜单组件的过程，包括菜单按钮、树状菜单和折叠式菜单，以及如何将这些菜单整合到应用程序界面中。

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