extjs tabpanel 鼠标右键菜单全部关闭tab插件案例

extjs | 2019-09-13 10:02:39

先看看效果,tabpanel可以打开很多面板,但是要全部关闭并不方便,其实官方给我这么一个插件TabCloseMenu。
这个插件菜单很完美的做了关闭的功能,关闭当前,关闭所有,全屏展示等按钮,并且可以添加其他功能按钮

10.png

实现代码:
1.插件的位置在ext-6.2.0\packages\ux\classic\src\TabCloseMenu.js,复制到你能加载到的地方。我是放在了我项目Ext/ux文件夹下面

2.引用插件

requires:["Ext.ux.TabCloseMenu"],


3.代码指定按钮名和添加其他按钮

xtype:"tabpanel",
                name:"appTabPanel",
        plugins:[{
            ptype: 'tabclosemenu',
            closeTabText : '关闭当前',
            closeOthersTabsText : '关闭其他',
            closeAllTabsText : '关闭所有',
            extraItemsTail : ['-', {
                text : '全屏显示',
                                glyph:"f0b2",
                                handlerStatus:0,
                handler : function(item) {
                    if (this.handlerStatus==0){
                        this.handlerStatus=1;
                        this.setText("退出全屏");
                        app.getApplication().getMainView().down("panel[name=appNorthBanner]").hide();
                        app.getApplication().getMainView().down("treepanel[name=appWestTreeMenu]").collapse();
                                        }else{
                        this.handlerStatus=0;
                        this.setText("全屏显示");
                        app.getApplication().getMainView().down("panel[name=appNorthBanner]").show();
                        app.getApplication().getMainView().down("treepanel[name=appWestTreeMenu]").expand();
                                        }
                }
            }]
            }],


登录后即可回复 登录 | 注册
    
关注编程学问公众号