ext中引用ux_16. Ext.ux.TabCloseMenu插件的使用（TabPanel右键关闭菜单） 示例

转自：https://crabdave.iteye.com/blog/327978

Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例

效果：

创建调用的HTML：

Ext.onReady(function(){

new Ext.TabPanel({

renderTo : document.body,

region:'fit',

deferredRender:false,

activeTab:0,

resizeTabs:true, // turn on tab resizing

minTabWidth: 115,

tabWidth:135,

enableTabScroll:true,

items:[{title:"title1",id:'tab1',closable:true},{title:"title2",id:'tab2',closable:true},{title:"title3",id:'tab3',closable:true}],

plugins: new Ext.ux.TabCloseMenu()

});

});

Ext.ux.TabCloseMenu文件源码：

/*

* Ext JS Library 2.2

* Copyright(c) 2006-2008, Ext JS, LLC.

* licensing@extjs.com

*

* http://extjs.com/license

*/

// Very simple plugin for adding a close context menu to tabs

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: '关闭标签',

handler : function(){

tabs.remove(ctxItem);

}

},{

id: tabs.id + '-close-others',

text: '关闭其他标签',

handler : function(){

tabs.items.each(function(item){

if(item.closable && item != ctxItem){

tabs.remove(item);

}

});

}

},{

id: tabs.id + '-close-all',

text: '关闭全部标签',

handler : function(){

tabs.items.each(function(item){

if(item.closable){

tabs.remove(item);

}

});

}

}]);

}

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());

}

};