ExtJs TabPanel右键功能插件

 

 

下面是ExtJs TabPanel右键功能插件，可以全部关闭Tab，或者关闭除自己的其它Tab，可以关闭当前Tab等功能。

Js代码  

1. Ext.ux.TabCloseMenu = function(){  
2.   
3.     var tabs, menu, ctxItem;  
4.   
5.     this.init = function(tp){  
6.   
7.         tabs = tp;  
8.   
9.         tabs.on('contextmenu', onContextMenu);  
10.   
11.     }  
12.   
13.    
14.   
15.     function onContextMenu(ts, item, e){  
16.   
17.         if(!menu){ // create context menu on first right click  
18.   
19.             menu = new Ext.menu.Menu([{  
20.   
21.                 id: tabs.id + '-close',  
22.   
23.                 text: syscommon.closetab,  
24.   
25.                 handler : function(){  
26.   
27.                     tabs.remove(ctxItem,false);  
28.   
29.                 }  
30.   
31.             },{  
32.   
33.                 id: tabs.id + '-close-others',  
34.   
35.                 text:syscommon.closealltab,  
36.   
37.                 handler : function(){  
38.   
39.                     tabs.items.each(function(item){  
40.   
41.                         if(item.closable && item != ctxItem){  
42.   
43.                             tabs.remove(item,false);  
44.   
45.                         }  
46.   
47.                     });  
48.   
49.                 }  
50.   
51.             },{  
52.   
53.                 id: tabs.id + '-close-all',  
54.   
55.                 text: syscommon.closeothertab,  
56.   
57.                 handler : function(){  
58.   
59.                     tabs.items.each(function(item){  
60.   
61.                         if(item.closable){  
62.   
63.                             tabs.remove(item,false);  
64.   
65.                         }  
66.   
67.                     });  
68.   
69.                 }  
70.   
71.             }]);  
72.   
73.         }  
74.   
75.         ctxItem = item;  
76.   
77.         var items = menu.items;  
78.   
79.         items.get(tabs.id + '-close').setDisabled(!item.closable);  
80.   
81.         var disableOthers = true;  
82.   
83.         tabs.items.each(function(){  
84.   
85.             if(this != item && this.closable){  
86.   
87.                 disableOthers = false;  
88.   
89.                 return false;  
90.   
91.             }  
92.   
93.         });  
94.   
95.         items.get(tabs.id + '-close-others').setDisabled(disableOthers);  
96.   
97.         var disableAll = true;  
98.   
99.         tabs.items.each(function(){  
100.   
101.             if(this.closable){  
102.   
103.                 disableAll = false;  
104.   
105.                 return false;  
106.   
107.             }  
108.   
109.         });  
110.   
111.         items.get(tabs.id + '-close-all').setDisabled(disableAll);  
112.   
113.         menu.showAt(e.getPoint());  
114.   
115.     }  
116.   
117. };  
118.   
119.   
     

使用方法很简单：

在TabPanel上加上这句，plugins : new Ext.ux.TabCloseMenu()