下面是ExtJs TabPanel右键功能插件,可以全部关闭Tab,或者关闭除自己的其它Tab,可以关闭当前Tab等功能。
- Ext.ux.TabCloseMenu = function(){
- var tabs, menu, ctxItem;
- this.init = function(tp){
- tabs = tp;
- tabs.on('contextmenu', onContextMenu);
- }
- function onContextMenu(ts, item, e){
- if(!menu){ // create context menu on first right click
- menu = new Ext.menu.Menu([{
- id: tabs.id + '-close',
- text: syscommon.closetab,
- handler : function(){
- tabs.remove(ctxItem,false);
- }
- },{
- id: tabs.id + '-close-others',
- text:syscommon.closealltab,
- handler : function(){
- tabs.items.each(function(item){
- if(item.closable && item != ctxItem){
- tabs.remove(item,false);
- }
- });
- }
- },{
- id: tabs.id + '-close-all',
- text: syscommon.closeothertab,
- handler : function(){
- tabs.items.each(function(item){
- if(item.closable){
- tabs.remove(item,false);
- }
- });
- }
- }]);
- }
- ctxItem = item;
- var items = menu.items;
- items.get(tabs.id + '-close').setDisabled(!item.closable);
- var disableOthers = true;
- tabs.items.each(function(){
- if(this != item && this.closable){
- disableOthers = false;
- return false;
- }
- });
- items.get(tabs.id + '-close-others').setDisabled(disableOthers);
- var disableAll = true;
- tabs.items.each(function(){
- if(this.closable){
- disableAll = false;
- return false;
- }
- });
- items.get(tabs.id + '-close-all').setDisabled(disableAll);
- menu.showAt(e.getPoint());
- }
- };
-
使用方法很简单:
在TabPanel上加上这句,plugins : new Ext.ux.TabCloseMenu()