zoukankan      html  css  js  c++  java
  • 16. Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例

    转自:https://crabdave.iteye.com/blog/327978

    Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例

    效果:

     

    创建调用的HTML:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
     <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="extjs/ext-all.js"></script>
     <script type="text/javascript" src="./TabCloseMenu.js"></script>
    <style type="text/css">
    </style>
    <script>
    Ext.onReady(function(){
              new Ext.TabPanel({
                renderTo : document.body,
                region:'fit',
                deferredRender:false,
                activeTab:0,
                resizeTabs:true, // turn on tab resizing
                minTabWidth: 115,
                tabWidth:135,
                enableTabScroll:true,
                items:[{title:"title1",id:'tab1',closable:true},{title:"title2",id:'tab2',closable:true},{title:"title3",id:'tab3',closable:true}],
                plugins: new Ext.ux.TabCloseMenu()
             });
    });
    </script>
    </head>
    <body>
    </body>
    </html>

     

    Ext.ux.TabCloseMenu文件源码:

    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */


    // Very simple plugin for adding a close context menu to tabs

    Ext.ux.TabCloseMenu = function(){
        var tabs, menu, ctxItem;
        this.init = function(tp){
            tabs = tp;
            tabs.on('contextmenu', onContextMenu);
        }

        function onContextMenu(ts, item, e){
            if(!menu){ // create context menu on first right click
                menu = new Ext.menu.Menu([{
                    id: tabs.id + '-close',
                    text: '关闭标签',
                    handler : function(){
                        tabs.remove(ctxItem);
                    }
                },{
                    id: tabs.id + '-close-others',
                    text: '关闭其他标签',
                    handler : function(){
                        tabs.items.each(function(item){
                            if(item.closable && item != ctxItem){
                                tabs.remove(item);
                            }
                        });
                    }
                },{
                    id: tabs.id + '-close-all',
                    text: '关闭全部标签',
                    handler : function(){
                        tabs.items.each(function(item){
                            if(item.closable){
                                tabs.remove(item);
                            }
                        });
                    }
                }]);
            }
            ctxItem = item;
            var items = menu.items;
            items.get(tabs.id + '-close').setDisabled(!item.closable);
            var disableOthers = true;
            tabs.items.each(function(){
                if(this != item && this.closable){
                    disableOthers = false;
                    return false;
                }
            });
            items.get(tabs.id + '-close-others').setDisabled(disableOthers);
            var disableAll = true;
            tabs.items.each(function(){
                if(this.closable){
                    disableAll = false;
                    return false;
                }
            });
            items.get(tabs.id + '-close-all').setDisabled(disableAll);
            menu.showAt(e.getPoint());
        }
    };

  • 相关阅读:
    MAVEN 配置阿里云源
    Windows10远程连接CentOS7(搭建Xrdp服务器)
    在jsp显示图片
    unbuntu自动任务定时重启
    eager模式与自定义训练
    JDK安装
    VMware克隆Linux虚拟机注意事项
    系统字符编码
    Iptables防火墙
    查看系统信息
  • 原文地址:https://www.cnblogs.com/sharpest/p/7552480.html
Copyright © 2011-2022 走看看