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

浏览数：27 / 时间：2015年06月09日

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

[javascript] view plain copy

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的代码

[javascript] view plain copy

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

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

[javascript] view plain copy

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: ‘<iframe name="mainframe" width="100%" height="100%" frameborder="0" src="‘+url+‘"></iframe>‘
});
tabs.add(NewTabPanel).show();
}