首页 > 其他分享 >Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例

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

时间:2023-04-28 18:10:21浏览次数:38  
标签:function 插件 示例 tabs items item Ext 右键 id


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.
 * [email protected] * 
 * 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());
    }
};

标签:function,插件,示例,tabs,items,item,Ext,右键,id
From: https://blog.51cto.com/u_9716826/6235230

相关文章

  • Ext.ux.GMapPanel.js组件的使用 示例
    Ext.ux.GMapPanel.js组件的使用示例 效果: 创建调用的html:<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>GMapWindowExample</title><linkrel="stylesheet"type=&......
  • 超大文件上传和断点续传的示例
    ​ 需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制。 第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify......
  • Python rangelib.RangeSet类代码示例
    https://vimsky.com/examples/detail/python-ex-rangelib-RangeSet---class.htmlPythonrangelib.RangeSet类代码示例本文整理汇总了Python中rangelib.RangeSet类的典型用法代码示例。如果您正苦于以下问题:PythonRangeSet类的具体用法?PythonRangeSet怎么用?PythonRangeSet使......
  • Java获取1688商品详情API接口示例说明
    ​ 在使用JavaWeb类的时候,如果我们需要获取一个网站中某个商品的详细信息,我们可以使用JavaScript来获取。我们可以用JavaScript来实现一个获取商品详情的API接口,来获取一个网站中某个商品的详细信息。在使用JavaScript进行接口请求时,可以使用下面的方法:通过javascript获......
  • Vue插件图片预览hevue-img-preview
    安装#安装npminstallhevue-img-preview--save#main.js引入importhevueImgPreviewfrom'hevue-img-preview'Vue.use(hevueImgPreview)#使用#//给任意对象添加任意事件,例如<img:src="imgurl"@click="previewImg(imgurl)">#//在事件里调用方法进行预......
  • 淘宝店铺商品详情接口代码-获取淘宝商品详情 API 接口返回值说明示例
    ​现在某宝的规则越来越严,想要入驻某宝需要审核的特别严格,不然就会被封店,那么大家知道某宝店铺商品详情接口吗?下面是我整理的关于某宝店铺商品详情接口的相关内容,大家可以来了解下! 目前提供的接口有:商品详情、商品详情原数据、商品评论、商品快递费用、淘宝分类详情、关键字搜......
  • pyqt5-右键菜单
    1、介绍pyqt支持两种类型的菜单,窗口的菜单和右键菜单。这里阐述右键菜单的使用。2、右键触发fromPyQt5.QtCoreimportQtself.ui.plainTextEdit:QPlainTextEditself.ui.plainTextEdit.setContextMenuPolicy(Qt.CustomContextMenu)self.ui.plainTextEdit.customContextMen......
  • 网页截图,html2canvas简单示例
     <divid="box"><p>asd4a5s6fa6s5f1asf</p><imgstyle="width:200px"src="xxxxxx.png"/><buttonstyle="width:100px;height:30px"onclick="prtsc()">pr......
  • java jar 没有主清单属性_Spring Boot jar中没有主清单属性的解决方法「建议收藏」
    javajar没有主清单属性_SpringBootjar中没有主清单属性的解决方法「建议收藏」原文链接:https://cloud.tencent.com/developer/article/2133065大家好,又见面了,我是你们的朋友全栈君。使用SpringBoot微服务搭建框架,在eclipse和Idea下能正常运行,但是在打成jar包部署或者直接......
  • GMaps.js:让你快速集成 Google Maps 服务的 jQuery 插件
    GMaps.js功能除了添加指定经纬度的标准地图之外,GMaps.js还能定义地图放大的级别,添加标注,获取当前用户的地理位置(HTML5geolocation),定义路线,绘制折线,并且实现这些功能只需要简单的几行代码。另外GMaps.js每个动作都有callback函数让你去集成自定义事件。目前GMaps.js没有详......