ExtJS4.1 ExtJS TabPanel 双击标签关闭该页

最新推荐文章于 2025-06-30 09:01:16 发布

原创最新推荐文章于 2025-06-30 09:01:16 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #ExtJS #EXTJS #Extjs #tabs #双击关闭

Extjs 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在ExtJS4.1中实现TabPanel组件的标签页双击关闭功能，提供了详细的方法步骤。

/*总觉得 TabPanel 生成的那个关闭按钮太小
关闭的时候不太顺手感觉不方便所以想双击关闭tab方便些
于是在网上找到下面的代码
URL：http://atian25.iteye.com/blog/413920
可是用在我的系统框架上无效，本人用的是ExtJs4.1。
不知道是不是我的问题，可是实在找不出错在哪里。
于是自己想了个办法亲测支持ExtJs4.1
可能有点麻烦可是没办法上面那个方法我实在是找不出问题在哪里
*///---下面是网上找的方法本人无效------

        var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'script', title: 'Short Text'},
            {contentEl:'markup', title: 'Long Text'}
        ],
        initEvents : function(){
		        Ext.TabPanel.superclass.initEvents.call(this);
		        this.on('add', this.onAdd, this, {target: this});
		        this.on('remove', this.onRemove, this, {target: this});
		        this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
		        this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
		        if(this.enableTabScroll){
		            this.mon(this.strip, 'mousewheel', this.onWheel, this);
		        }
		        //ADD:monitor title dbclick
		        this.mon(this.strip,'dblclick',this.onTitleDbClick,this);
		    },
                     //ADD: handler
		    onTitleDbClick:function(e,target,o){
		    	var t = this.findTargets(e);
		    	if (t.item.fireEvent('beforeclose', t.item) !== false) {
                            t.item.fireEvent('close', t.item);
                            this.remove(t.item);                
                       }
		    }
    });

-----下面是我的方法--------

有用到 Viewport 只贴出了 tabpanel的代码

              
                {
                    xtype: "tabpanel",
                    region: "center",
                    id: "tabpanel",
                    minTabWidth: 100,
                    listeners: {
                        'tabchange': function () {
                        }
                    }
                }

我是动态生成tab的所以就写成这样了注意里面的代码双击关闭就是这里面

var CreateTab=function(id,title,url){
		var tabs = Ext.getCmp("tabpanel");
                for (var i = 0; i < tabs.items.length; i++) {
                    if (tabs.items.items[i].title == title) {
                      tabs.items.items[i].show();
                      return;
                    }
                }
                var NewTabPanel= Ext.create('Ext.panel.Panel', {
                    layout: 'fit', 
                    title: title, 
                    collapsible: true, 
                    closable: id==0?false:true, 
                    autoScroll: false,
                    initEvents: function () {
                        var obj = this;
                        var id = 'tab-' + (this.id.split('-')[1] - 1 + 2) + '-btnWrap';
                        Ext.get(id).dom.ondblclick = function () {
                            if(obj.title!='我的工作台')
                                tabs.remove(obj);
                        }
                    },
                    html: ' name="mainframe" width="100%" height="100%" frameborder="0" src="'+url+'">'
                });
                tabs.add(NewTabPanel).show();
}

//用下面的代码可以测试添加Tab
CreateTab("0", "我的工作台", "MyHome.htm");
CreateTab("1", "账户管理", "User.htm");