转自：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. （蓝桥杯）2018JAVA B组 日志分析

    日志统计 小明维护着一个程序员论坛.现在他收集了一份"点赞"日志,日志共有N行.其中每一行的格式是: ts id 表示在ts时刻编号id的帖子收到一个"赞". ...

  2. //……关于HTTP与HTTPS

    图1 图2 第一张访问域名http://www.tsinghua.edu.cn,谷歌浏览器提示不安全链接,第二张是https://www.12306.cn/index,浏览器显示安全,为什么会这样子呢 ...

  3. 嵌入式linux启动信息完全注释

    嵌入式linux启动信息完全注释 from:http://www.embedlinux.cn/ShowPost.asp?ThreadID=377 摘要 我们在这里讨论的是对嵌入式linux系统的启动过 ...

  4. bzoj3545 Peaks 线段树合并

    离线乱搞... 也就是一个线段树合并没什么 #include<algorithm> #include<iostream> #include<cstring> #in ...

  5. 【ZJOI2017 Round1练习&BZOJ5354】D7T3 room（DP）

    题意: 思路: 写了两种版本 考场版本 ..,..]of longint; t:..,..]of longint; n,m,i,j,k,oo,ans,d1:longint; function min( ...

  6. mysql转oracle注意事项

    1.mysql中有自增长,oracle用新建sequence代替. 2.在实体类的id要指定相关的sequence @GeneratedValue(strategy=GenerationType.SE ...

  7. Jsp标签字典开发_基于Spring+Hibernate

    目录 1. Jsp标签字典开发_基于Spring+Hibernate 1.1. 简述 1.2. 定义DictItem实体 1.3. 定义字典的@interface 1.4. 定义字典缓存类 1.5. ...

  8. 物理内存、虚拟内存、buffers、cached、共享内存、swap

    物理内存: 实际使用的内存: 虚拟内存: 虚拟内存是操作系统内核为了对进程地址空间进行管理(process address space management)而精心设计的一个逻辑意义上的内存空间概念. ...

  9. 类的operator new与operator delete的重载【转】

    http://www.cnblogs.com/luxiaoxun/archive/2012/08/11/2633423.html 为什么有必要写自己的operator new和operator del ...

  10. 建立DHCPserver

    一.实验的目的:     实现以下的要求的DHCPserver,了解子网内的IP分配的情况. 二.实验目标 虚拟机 vm1:192.168.6.3/24属于子网VMnet8. 在其上建立DHCPser ...