`
sammyfun
  • 浏览: 1163396 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

tabpanel右键

EXTCC++C#HTML 
阅读更多
关键字: ext.ux.tabclosemenu插件的使用（tabpanel右键关闭菜单） 示例
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.
*
*
* 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());
    }
};


11111111
关键字: ext.ux.tabclosemenu插件的使用（tabpanel右键关闭菜单） 示例
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.
*
*
* 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());
    }
};

分享到：
| js中英文
评论
发表评论

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

相关推荐

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

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

    TabPanel选卡结合右键菜单实例

    本实例探讨的是如何使用jQuery来实现一个功能丰富的TabPanel选卡结合右键菜单的交互功能，这对于创建高效的多页面视图应用是非常实用的。 首先，TabPanel是一种常见的UI组件，它允许用户在一个固定的区域中通过不同...

    ExtJS TabPanel 标签操作

    至于`tabMenu.js`，它可能包含了自定义Tab的右键菜单功能。在ExtJS中，可以为每个Tab配置`menu`属性来自定义菜单，如下： ```javascript { title: 'Tab with Menu', menu: [ { text: '菜单项1', handler: ...

    TabPanel

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

    TabPanel布局

    总的来说，这个例子演示了如何使用ExtJS创建一个复杂的多区域布局，并在其中嵌套TabPanel组件，同时展示了如何定制TabPanel的行为，如标签页的自动调整、滚动以及右键菜单功能。这种布局方式在实际开发中非常常见，...

    easyui-tabbar右击弹出菜单

    本文将详细探讨如何利用EasyUI的TabPanel（tabs）组件实现一个功能丰富的右键菜单，包括关闭当前、关闭其他、关闭左侧和关闭右侧的选项。 首先，让我们了解EasyUI的TabPanel组件。TabPanel是EasyUI中的一个核心组件...

    jQuery EasyUI 右键菜单–关闭标签/选项卡的简单实例

    总的来说，这个实例展示了如何使用 jQuery EasyUI 创建一个自定义的右键菜单，并与 TabPanel 组件结合，实现对标签页的管理功能。这种技术在开发富客户端界面时非常有用，因为它提供了用户友好的交互方式来管理标签...

    Coolite控件

    2. **创建标签页**：在TabPanel上右键点击，选择“添加新的Tab”或者通过代码方式动态添加。每个新添加的Tab代表一个独立的面板。 3. **设置标签文本**：为每个Tab设置相应的标题，这将在用户界面中作为标签显示。 ...

    关于Ajax+js+struts2实例的极品网站推荐

    在上述实例中，Ajax被用来实现实时的数据交互，例如工具栏的操作、树形结构的编辑、Tabpanel的切换以及右键菜单的事件处理。 2. **JavaScript**：JavaScript是实现Ajax的关键脚本语言，负责处理用户交互、DOM操作、...

    基于ExtJS框架和Vml的可视化流程配置程序（第二版）

    1、删除原有的【路径】和【选择】按钮，修改为左键选择，右键画线； 2、修改节点属性配置窗口，修改为tabpanel方式，同时添加字段权限配置功能； 3、【添加环节】按钮目前点击一次只可以添加个环节； 三、代码及...

    搭建系统框架源码下载

    都可以右键选择是删除当前grid还是删除其他的grid，但不会删除首页，也不要实现在首页上右键的功能，这个很重要哦。 5，在系统的最下面实现了一个显示公告的按钮和一个时钟，对于一个系统来说也是非常重要的。 下面...

    后台管理模板

    4，在中间区域实现了grid 并且实现了分页，根据类型的不同动态显示，因为这个grid是嵌套在tabpanel里面的，这样就可以显示无限个grid，当查看某个grid的时候，无须在请求服务器，就可以查看，另外tabpanel可以动态的...

    2008最新框架源码，简单清晰明了

    4，在中间区域实现了grid 并且实现了分页，根据类型的不同动态显示，因为这个grid是嵌套在tabpanel里面的，这样就可以显示无限个grid，当查看某个grid的时候，无须在请求服务器，就可以查看，另外tabpanel可以动态的...

    WPF 自定义TabControl

    其次，为了实现TabItem的删除功能，我们需要为每个TabItem添加一个关闭按钮或者右键菜单，并绑定相应的事件处理。在XAML中，可以在TabItem模板中添加一个Button，如下所示： ```xml ,0,0,0" Command="{...

    extjs demo程序

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

    深入浅出ExtJS第2版

    2.2.5　Ext.TabPanel 24 2.3　本章小结 27 第3章　表格控件 28 3.1　Grid的特性简介 28 3.2　制作一个简单的Grid 29 3.3　Grid常用功能详解 32 3.3.1　部分属性功能 32 3.3.2　自主决定每列的宽度 33 3.3.3　让Grid...

    DevComponents DotNetBar v7.6.0.0

    通过在Visual Studio的工具箱中右键点击，选择“添加项”，然后定位到dll文件，开发者可以轻松地将DotNetBar集成到他们的项目中，以提升应用的外观和用户体验。 DotNetBar提供了丰富的UI组件，这些组件包括但不限于...

    ext.net安装说明

    它基于 Ext.js 库构建，提供了超过 100 种工具，包括 TextBox、ComboBox、Button、ToolBar、StatusBar、Panel、TabPanel、ExplorerBar、MenuBar、PictureBox 等多种控件，并且支持 Ajax 无刷新效果。这些特性使得 ...

    Ext 开发指南 学习资料

    9.6. JsonView实现用户卡片拖拽与右键菜单 9.7. 下拉列表选择每页显示多少数据 10. 撕裂吧！邪魔外道与边缘学科。 10.1. dwr与ext整合 10.1.1. 无侵入式整合dwr和ext 10.1.2. DWRProxy 10.1.3. DWRTreeLoader 10.1.4...

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