`
crabdave
  • 浏览: 1294687 次
  • 性别: 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的那个文件就可以使用了！

    TabPanel布局

    `plugins`属性引入了`Ext.ux.TabCloseMenu`插件，提供右键菜单功能，允许用户关闭单个、其他或全部标签页。 `panel1`是一个简单的Panel，被添加为`paneltab`的第一个标签页。`bodyStyle`设置为'padding:0px'，以...

    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...

    ExtJs部署及使用方法

    plugins: new Ext.ux.TabCloseMenu() // 为Tab Panel的每个tab添加关闭菜单 }); // 添加新的Tab function addTab(id, tabTitle, targetUrl) { mainPanel.add({ id: id, title: tabTitle, iconCls: 'tabs', ...

    extjs的的初步开发步骤

    - **关闭Tab页功能**：如`js/TabCloseMenu.js`，提供在Tab面板上关闭当前Tab页的功能。 - **页面共用的JavaScript**：例如`js/b2bcommon.js`，可以存放通用的函数或逻辑。 - **CSS样式文件**：如`css/b2b-grid....

    TabPanel

    `tabAdv.doc`可能包含了更深入的使用指南、示例代码或者自定义功能的介绍，如支持右键关闭选项卡、拖放排序等。而`TabCloseMenu.js`很可能是一个JavaScript文件，实现了选项卡关闭功能的菜单，比如单击右上角的“X”...

    extjs demo程序

    TabCloseMenu.js可能定义了一个自定义的菜单，当用户右键点击选项卡时出现，允许用户关闭当前或多个选项卡，提供更灵活的用户交互体验。 4. **branch12**: 这看起来可能是代码仓库中的一个分支名，可能代表了这个...

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