zoukankan      html  css  js  c++  java
  • 8、手把手教你Extjs5(八)自定义菜单2

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

    zfdvw35a

  • 相关阅读:
    互动留言赠书:《Oracle高性能系统实战大全》
    超融合硬件损坏导致Oracle RAC异常恢复实录
    架构师不得不了解的硬件知识
    加班做的可视化被老板嫌弃,是因为你不会用这些数据工具
    iOS开发之七:常用控件--UISlider、UISegmentedControl、UIPageControl的使用
    iOS开发之六:常用控件--UIImageView的使用
    iOS开发之五:常用控件--UITextField的使用
    Objective-C实现常用的4种排序算法
    C语言实现4种常用排序
    面试常用的4种数组排序
  • 原文地址:https://www.cnblogs.com/niejunchan/p/4996903.html
Copyright © 2011-2022 走看看