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

/*总觉得 TabPanel 生成的那个关闭按钮太小
关闭的时候不太顺手 感觉不方便 所以想双击关闭tab方便些
于是在网上找到下面的代码 
URL：http://atian25.iteye.com/blog/413920
可是用在我的系统框架上无效，本人用的是ExtJs4.1。
不知道是不是我的问题，可是实在找不出错在哪里。
于是 自己想了个办法 亲测支持ExtJs4.1 
可能有点麻烦 可是没办法 上面那个方法 我实在是找不出问题在哪里
*///////////////////---下面是网上找的方法 本人无效------////////////////////
[javascript] view plaincopy
  1.     var tabs = new Ext.TabPanel({  
  2.     renderTo: 'tabs1',  
  3.     width:450,  
  4.     activeTab: 0,  
  5.     frame:true,  
  6.     defaults:{autoHeight: true},  
  7.     items:[  
  8.         {contentEl:'script', title: 'Short Text'},  
  9.         {contentEl:'markup', title: 'Long Text'}  
  10.     ],  
  11.     initEvents : function(){  
  12.       Ext.TabPanel.superclass.initEvents.call(this);  
  13.       this.on('add', this.onAdd, this, {target: this});  
  14.       this.on('remove', this.onRemove, this, {target: this});  
  15.       this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);  
  16.       this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);  
  17.       if(this.enableTabScroll){  
  18.           this.mon(this.strip, 'mousewheel', this.onWheel, this);  
  19.       }  
  20.       //ADD:monitor title dbclick  
  21.       this.mon(this.strip,'dblclick',this.onTitleDbClick,this);  
  22.   },  
  23.                  //ADD: handler  
  24.   onTitleDbClick:function(e,target,o){  
  25.     var t = this.findTargets(e);  
  26.     if (t.item.fireEvent('beforeclose', t.item) !== false) {  
  27.                         t.item.fireEvent('close', t.item);  
  28.                         this.remove(t.item);                  
  29.                    }  
  30.   }  
  31. });  


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

有用到 Viewport 只贴出了 tabpanel的代码
[javascript] view plaincopy
  1. {  
  2.     xtype: "tabpanel",  
  3.     region: "center",  
  4.     id: "tabpanel",  
  5.     minTabWidth: 100,  
  6.     listeners: {  
  7.         'tabchange': function () {  
  8.         }  
  9.     }  
  10. }  
我是动态生成tab的 所以就写成这样了 注意里面的代码 双击关闭就是这里面
[javascript] view plaincopy
  1. var CreateTab=function(id,title,url){  
  2.         var tabs = Ext.getCmp("tabpanel");  
  3.                 for (var i = 0; i < tabs.items.length; i++) {  
  4.                     if (tabs.items.items[i].title == title) {  
  5.                       tabs.items.items[i].show();  
  6.                       return;  
  7.                     }  
  8.                 }  
  9.                 var NewTabPanel= Ext.create('Ext.panel.Panel', {  
  10.                     layout: 'fit',   
  11.                     title: title,   
  12.                     collapsible: true,   
  13.                     closable: id==0?false:true,   
  14.                     autoScroll: false,  
  15.                     initEvents: function () {  
  16.                         var obj = this;  
  17.                         var id = 'tab-' + (this.id.split('-')[1] - 1 + 2) + '-btnWrap';  
  18.                         Ext.get(id).dom.ondblclick = function () {  
  19.                             if(obj.title!='我的工作台')  
  20.                                 tabs.remove(obj);  
  21.                         }  
  22.                     },  
  23.                     html: '<iframe name="mainframe" width="100%" height="100%" frameborder="0" src="'+url+'"></iframe>'  
  24.                 });  
  25.                 tabs.add(NewTabPanel).show();  
  26. }  
[javascript] view plaincopy
  1. //用下面的代码可以测试添加Tab  
  2. CreateTab("0", "我的工作台", "MyHome.htm");  
  3. CreateTab("1", "账户管理", "User.htm");  
更多0
posted @ 2014-07-12 14:51  郑文亮  阅读(4707)  评论(0)  编辑  收藏  举报