ExtJS4.1 ExtJS TabPanel Double-click the label to close the page

/* Always feel that the close button generated by TabPanel is too small
It's not easy to close, so I want to double-click the tab to make it easier.
So I found the following code on the Internet
url:http://atian25.iteye.com/blog/413920
But used in my system framework is not valid, I use the ExtJs4.1.
I don't know if it's my problem, but I can't find the wrong one.
So I thought of a way to pro-test support ExtJs4.1
It could be a bit of a hassle, but there's no way I can find the problem.
*///////////////////---Below is the method of online search I am invalid------//////////////////// [JavaScript]View Plaincopy

2. var tabs = New Ext.tabpanel ({
4. Renderto: ' tabs1 ',
6. WIDTH:450,
8. activetab:0,
10. Frame:true,
12. Defaults:{autoheight: true},
14. items:[
16. {contentel:' script ', title: ' Short Text '},
18. {contentel:' markup ', title: ' Long Text '}
20. ],
22. Initevents: function () {
24. Ext.TabPanel.superclass.initEvents.call (this);
26. This.on (' Add ', this.onadd, this , {target: this });
28. This.on (' Remove ', this.onremove, this , {target: this });
30. This.mon (this.strip, ' MouseDown ', This.onstripmousedown, this );
32. This.mon (this.strip, ' ContextMenu ', this.onstripcontextmenu, this );
34. if (this.enabletabscroll) {
36. This.mon (this.strip, ' MouseWheel ', This.onwheel, this );
38. }
40. //add:monitor title Dbclick
42. This.mon (this.strip,' DblClick ',This.ontitledbclick, this);
44. },
46. //add:handler
48. Ontitledbclick:function (e,target,o) {
50. var t = this.findtargets (e);
52. if (t.item.fireevent (' BeforeClose ', T.item)!== false) {
54. T.item.fireevent (' close ', t.item);
56. This.remove (T.item);
58. }
60. }
62. });

-----Here is my method--------useful to Viewport only posted TabPanel code [JavaScript]View Plaincopy < param name= "wmode" value= "Transparent" >

1. {
2. Xtype: "TabPanel",
3. Region: "center",
4. ID: "tabpanel",
5. MINTABWIDTH:100,
6. Listeners: {
7. ' tabchange ': function () {
8. }
9. }
10. }

I'm dynamically generating tab, so I'm going to write this down. Notice the code inside. [JavaScript]View Plaincopy

2. var createtab=function (id,title,url) {
4. var tabs = ext.getcmp ("TabPanel");
6. For (var i = 0; i < tabs.items.length; i++) {
8. if (tabs.items.items[i].title = = title) {
10. Tabs.items.items[i].show ();
12. return;
14. }
16. }
18. var newtabpanel= ext.create (' Ext.panel.Panel ', {
20. Layout: ' fit ',
22. Title:title,
24. Collapsible: true,
26. Closable:id==0? false:true,
28. AutoScroll: false,
30. Initevents: function () {
32. var obj = this ;
34. var id = ' tab-' + (this.id.split ('-') [1]-1 + 2) + '-btnwrap ';
36. Ext.get (id). Dom.ondblclick = function () {
38. if (obj.title!=' My Workbench ')
40. Tabs.remove (obj);
42. }
44. },
46. HTML: ' <iframe name= ' mainframe "width=" 100% "height=" 100% "frameborder=" 0 "src=" ' +url+' "></iframe > '
48. });
50. Tabs.add (Newtabpanel). Show ();
52. }

[JavaScript]View Plaincopy < param name= "wmode" value= "Transparent" >

1. Use the following code to test the Add tab
2. Createtab ("0", "My Workbench", " myhome.htm");
3. Createtab ("1", "account Management", " user.htm");

more 0

• Next Extjs4.1 checkboxgroup dynamic generate checkbox and checkbox-bound point-click event