转自:https://crabdave.iteye.com/blog/327978
Ext.ux.TabCloseMenu插件的使用(TabPanel右键关闭菜单) 示例
效果:
创建调用的HTML:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title></title><link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" src="./TabCloseMenu.js"></script><style type="text/css"></style><script>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() });});</script></head><body></body></html>
Ext.ux.TabCloseMenu文件源码:
/*
* Ext JS Library 2.2 * Copyright(c) 2006-2008, Ext JS, LLC. * * * */// 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()); } };