转自：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());
    }
};

16. Ext.ux.TabCloseMenu插件的使用（TabPanel右键关闭菜单） 示例的更多相关文章

  1. ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页

    ext-4.2.1.883\examples\ux\IFrame.js ext-4.2.1.883\examples\ux\TabCloseMenu.js 复制到 \Scripts\ext-4.2.1 ...

  2. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  3. [转载]ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. 一款不错的多选下拉列表利器—— Ext.ux.form.SuperBoxSelect

    在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想功能的下拉列表, 特别是数据项比较多的时候,用户筛选起 ...

  5. ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...

  6. Ext.ux.form.SuperBoxSelect

    Ext.ux.form.SuperBoxSelect 在B/S系统中,下拉列表(select/dropdownlist/combobox)的应用随处可见,为了增强用户体验,开发人员也常常会做一些带联想 ...

  7. 【全网首创】修改 Ext.ux.UploadDialog.Dialog 源码支持多选添加文件，批量上传文件

    公司老框架的一个页面需要用到文件上传,本以为修改一个配置参数即可解决,百度一番发现都在说这个第三方插件不支持文件多选功能,还有各种各样缺点,暂且不讨论这些吧.先完成领导安排下来的任务. 任务一:支持多 ...

  8. ExtJs文件上传(Ext.ux.form.FileUploadField)

    Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, { /**  * @cfg {String} buttonText The b ...

  9. Ext.ux.grid.feature.Searching 解析查询参数，动态产生linq lambda表达式

    上篇文章中http://www.cnblogs.com/qidian10/p/3209439.html我们介绍了如何使用Grid的查询组建,而且将查询的参数传递到了后台. 那么我们后台如何介绍参数,并 ...

随机推荐

  1. 10 行 Python 代码，批量压缩图片 500 张，简直太强大了

    本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/5hpFDgjCpfb0O1Jg-ycACw 熟悉 "Pyth ...

  2. 用python爬取一张仓鼠图片

    一. 找到一张仓鼠图片并复制一下它的url url='http://img.go007.com/2017/08/16/c407f5b732f4e748_2.jpg' 二. 调用urllib库 impo ...

  3. IDEA的Maven Projects无法显示

    记一个小坑: 前两天重装了一下电脑系统,下载了个最新的IDEA2018.3.5,把Maven.JDK.TomCat都设置好了 今天打开IDEA创建一个新的Maven项目,项目没有显示让我导入Maven ...

  4. FPGA学习笔记（八）—— 状态机设计实例之独立按键消抖

    ###### [该随笔中部分内容转载自小梅哥] ######### 独立按键消抖自古以来在单片机和FPGA中都是个不可避免的问题,首先,解释一下什么叫做按键抖动,如图,按键在按下和松开的那个瞬间存在大 ...

  5. 基本dos

    文件夹的操作:   进入指定盘符:盘符名+:     dir:列出当前控制台下的所有文件以及文件夹  . cd +文件夹名称:进入指定文件夹     cd.. 返回上一级 cd \返回到当前目录的根目 ...

  6. 贪心算法求解活动安排<算法分析>

    一.实验内容及要求 1．要求按贪心算法原理求解问题: 2．要求手工输入s[10]及f[10],其中注意自己判断s[i]<f[i]: 3．要求显示所有活动及最优活动安排的i事件列表.二.实验步骤  ...

  7. Codeforces Round #364 (Div. 2)，只有A与B

    A. Cards time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  8. Java ：面向对象

    Java :面向对象 直面Java 第001期 什么是面向过程 面向过程是以函数为中心,要解决一个问题,需要把问题分解为一个个的步骤,然后定义一系列的流程,用特定的输入经过函数的处理,最终输出特定的结 ...

  9. Mycat集群方案收集（待实践）

    先收集,后续再实践. 我想,市面上开源方案中,涉及到高可用和负载均衡的部署,无论是哪一个产品应用,都基本离不开LVS+Keepalived+HAProxy+Nginx等等. 下面是收集的教程: htt ...

  10. LINUX 内核结构

    http://blog.csdn.net/hguisu/article/details/6122513 http://blog.csdn.net/hguisu/article/category/796 ...