码迷,mamicode.com
首页 > Web开发 > 详细

12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

时间:2015-11-26 12:41:02      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中。在MainModule.js中有一个函数,生成了当前的菜单数据:

// 根据data.systemMenu生成菜单条和菜单按钮下面使用的菜单数据
getMenus : function() {
    var items = [];
    var menuData = this.get(‘systemMenu‘); // 取得定义好的菜单数据
    Ext.Array.each(menuData, function(group) { // 遍历菜单项的数组
        var submenu = [];
        // 对每一个菜单项,遍历菜单条的数组
        Ext.Array.each(group.items, function(menuitem) {
            submenu.push({
                mainmenu : ‘true‘,
                moduleName : menuitem.module,
                text : menuitem.text,
                icon : menuitem.icon,
                glyph : menuitem.glyph,
                handler : ‘onMainMenuClick‘ // MainController中的事件处理程序
            })
        })
        var item = {
            text : group.text,
            menu : submenu,
            icon : group.icon,
            glyph : group.glyph
        };
        items.push(item);
    })
    return items;
}

 

其中的  handler : ‘onMainMenuClick‘,就是在点击了菜单以后,去执行 MainController.js中的onMainMenuClick 函数。修改一下MainController.js 文件,先引入Module.js

uses : [‘app.view.module.Module‘], 

 

再修改里面的函数:

// 选择了主菜单上的菜单后执行
onMainMenuClick : function(menuitem) {
    var maincenter = this.getView().down(‘maincenter‘);
            
    maincenter.setActiveTab(maincenter.add({
        xtype : ‘modulepanel‘,
        closable : true,
        reorderable : true
    }));
}

 


这样每单击一次菜单,都会生成一个Module,并把他放到tabPanel之中去。

下面再看看tabPanel之中的另一个功能,在tab上点右键,会有一个弹出式菜单。

技术分享

这里面有一些功能可以使用,可关闭,表示当前tab可以被关掉,在名字上方有一个X,如果取消可关闭,X就会消失,另外登录时自动打开和最多打开的功能现在还没做好。

12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

标签:

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

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