/*总觉得 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

• 下一篇Extjs4.1 checkboxgroup动态生成checkbox 还有 checkbox绑定点击事件

ExtJS4.1 ExtJS TabPanel 双击标签关闭该页,布布扣,bubuko.com