`
crabdave
  • 浏览: 1276053 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

EXTJavaScriptCSSJSPHTML 
阅读更多

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

分享到：
| Ext.ux.form.BrowseButton组件的使用（上传 ...
评论
2 楼 jiao_zg22 2016-01-19  
方便问下，去哪里下载包含Ext.ux.TabCloseMenu 这个类的库文件吗
1 楼 bevis.cn 2009-02-28  
我用了ext-2.0的jsp的左边的tree里调用Ext.ux.TabCloseMenu 。在右边的pannel里加一个tab ,这个tab里向服务器请求一个url，然后返回一个jsp。
那我遇到的问题，我想在加载这个jsp后，执行初始化的javascript,我用了 Eet.onReady()和window.onload也不行，是不是左边的tree在同一个页面有一个Ext.onReady,那我要怎么解决
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    解决EXTJS4.2的tabpanel右键关闭的BUG

    EXTJS4.2官网上的tabpanel的右键关闭当前页，关闭其它，关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件，只要替换当前4.2的那个文件就可以使用了！

    Ext+JS高级程序设计.rar

    10.2 标签页右键菜单TabCloseMenu 276 10.3 面板最大化MaximizeTool 278 10.4 分页设置PageSizePlugin 282 10.5 行数据扩展RowExpander 284 10.6 本章小结 290 第五部分 调试 第11章 调试 292 11.1 测试Ext.Element...

    关于__Federico Milano 的电力系统分析工具箱.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    mlab-upenn 研究小组的心脏模型模拟.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    混合图像创建大师matlab代码.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    中序遍历二叉树-java版本

    在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。

    无头单向非循环链表的实现（SList.c）

    无头单向非循环链表的实现（函数定义文件）

    两个有序链表的合并pta

    "PTA" 通常指的是一种在线编程平台，例如“Pata”或者某些特定学校或组织的编程练习与自动评测系统。在这种平台或系统中，学生或程序员会提交代码来解决各种问题，然后系统会自动运行并评测这些代码的正确性。 当提到“两个有序链表的合并PTA”时，这通常意味着在PTA平台上解决一个特定的问题，即合并两个有序链表。具体任务可能是给定两个已按升序排序的链表，要求编写代码来合并这两个链表，形成一个新的有序链表。

    在 Matlab 中创建的图形工具可改善航空航天数据的可视化.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    搜索引擎的设计与实现.zip

    搜索引擎的设计与实现

    年公司财务会计岗位工作总结（二）.docx

    工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。

    【基于Springboot+Vue的Java毕业设计】无人超市管理系统项目实战(源码+录像演示+说明).rar

    【基于Springboot+Vue的Java毕业设计】无人超市管理系统项目实战(源码+录像演示+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：314】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 无人超市管理系统有管理员，用户两个角色。管理员功能有个人中心，用户管理，商品类型管理，支付类型管理，公告类型管理，商品信息管理，出入库管理，出入库详情管理，购买管理，购买详情管理，公告信息管理。用户可以注册登录，自助购买，点击购买管理里面收银就可以选择支付类型和商品然后提交，还可以查看购买详情和公告信息。

    电视的半盲图像去模糊问题，.zip

    1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    公司年会基本流程表.doc

    年会班会资料，节目策划，游戏策划，策划案，策划方案，活动方案，筹办，公司年会，开场白，主持人，策划主题，主持词，小游戏。

    5G智慧港口解决方案.pptx

    在现有省、市港口信息化系统进行有效整合基础上，借鉴新 一代的感知-传输-应用技术体系，实现对码头、船舶、货物、重 大危险源、危险货物装卸过程、航管航运等管理要素的全面感知、 有效传输和按需定制服务，为行政管理人员和相关单位及人员提 供高效的管理辅助，并为公众提供便捷、实时的水运信息服务。 建立信息整合、交换和共享机制，建立健全信息化管理支撑 体系，以及相关标准规范和安全保障体系；按照“绿色循环低碳” 交通的要求，搭建高效、弹性、高可扩展性的基于虚拟技术的信 息基础设施，支撑信息平台低成本运行，实现电子政务建设和服务模式的转变。 实现以感知港口、感知船舶、感知货物为手段，以港航智能 分析、科学决策、高效服务为目的和核心理念，构建“智慧港口”的发展体系。 结合“智慧港口”相关业务工作特点及信息化现状的实际情况，本项目具体建设目标为： 一张图(即GIS 地理信息服务平台) 在建设岸线、港口、港区、码头、泊位等港口主要基础资源图层上，建设GIS 地理信息服务平台，在此基础上依次接入和叠加规划建设、经营、安全、航管等相关业务应用专题数据，并叠 加动态数据，如 AIS/GPS/移动平台数据，逐步建成航运管理处 "一张图"。系统支持扩展框架，方便未来更多应用资源的逐步整合。 现场执法监管系统 基于港口(航管)执法基地建设规划，依托统一的执法区域 管理和数字化监控平台，通过加强对辖区内的监控，结合移动平 台，形成完整的多维路径和信息追踪，真正做到问题能发现、事态能控制、突发问题能解决。 运行监测和辅助决策系统 对区域港口与航运业务日常所需填报及监测的数据经过科 学归纳及分析，采用统一平台，消除重复的填报数据，进行企业 输入和自动录入，并进行系统智能判断，避免填入错误的数据， 输入的数据经过智能组合，自动生成各业务部门所需的数据报 表，包括字段、格式，都可以根据需要进行定制，同时满足扩展 性需要，当有新的业务监测数据表需要产生时，系统将分析新的 需求，将所需字段融合进入日常监测和决策辅助平台的统一平台中，并生成新的所需业务数据监测及决策表。 综合指挥调度系统 建设以港航应急指挥中心为枢纽，以各级管理部门和经营港 口企业为节点，快速调度、信息共享的通信网络，满足应急处置中所需要的信息采集、指挥调度和过程监控等通信保障任务。 设计思路 根据项目的建设目标和“智慧港口”信息化平台的总体框架、 设计思路、建设内容及保障措施，围绕业务协同、信息共享，充 分考虑各航运(港政)管理处内部管理的需求，平台采用“全面 整合、重点补充、突出共享、逐步完善”策略，加强重点区域或 运输通道交通基础设施、运载装备、运行环境的监测监控，完善 运行协调、应急处置通信手段，促进跨区域、跨部门信息共享和业务协同。 以“统筹协调、综合监管”为目标，以提供综合、动态、实 时、准确、实用的安全畅通和应急数据共享为核心，围绕“保畅通、抓安全、促应急"等实际需求来建设智慧港口信息化平台。 系统充分整合和利用航运管理处现有相关信息资源，以地理 信息技术、网络视频技术、互联网技术、移动通信技术、云计算 技术为支撑，结合航运管理处专网与行业数据交换平台，构建航 运管理处与各部门之间智慧、畅通、安全、高效、绿色低碳的智 慧港口信息化平台。 系统充分考虑航运管理处安全法规及安全职责今后的变化 与发展趋势，应用目前主流的、成熟的应用技术，内联外引，优势互补，使系统建设具备良好的开放性、扩展性、可维护性。

    【基于Java+Springboot的毕业设计】线上医院挂号系统(源码+演示视频+说明).rar

    【基于Java+Springboot的毕业设计】线上医院挂号系统(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：300】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 本次开发的线上医院挂号系统实现了字典管理、论坛管理、会员管理、单页数据管理、医生管理、医生留言管理、医生挂号订单管理、管理员管理等功能。

    年网通营业员个人工作总结.docx

    工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。

    财务数据分析模型3.xlsx

    Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示

    最全英语六级真题（从12年到23年总共66个真题）

    最全英语六级真题，从12年到23年总共66个真题。全网最全。

    财务助理实习总结(2).docx

    工作总结，新年计划，岗位总结，工作汇报，个人总结，述职报告，范文下载，新年总结，新建计划。

Magicbox
Global site tag (gtag.js) - Google Analytics