码迷,mamicode.com
首页 > 其他好文 > 详细

8、手把手教你Ext5(八)自定义菜单2

时间:2015-11-26 10:54:48      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享

8、手把手教你Ext5(八)自定义菜单2

标签:

原文地址:http://www.cnblogs.com/niejunchan/p/4996903.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!