问题描述
项目中使用到ext创建tab页，想右键tab页title可以选择关闭此tab页，但是创建的menu中关闭选项有时候会出现两个我的代码如下var openInTab= function(id,node,e,url) {e.stopEvent();var tabId=id;var n = tabs.getComponent(tabId);if (!n) {var n = tabs.add({id:tabId,title: node.text,closable:true,html : '<iframe id="ifr_'+tabId+'" width="100%" height="100%" src="'+url+'"></iframe>'});}tabs.setActiveTab(n);}//生成标签页var tabs = new Ext.TabPanel({region:'center',animScroll:true,deferredRender:false,activeTab:0,resizeTabs:false, // turn on tab resizing//minTabWidth: 20,//tabWidth: 30,enableTabScroll:true,items:[ { id:'main', title: '首页', html: '<iframe id="ifr_welcome" width="100%" height="100%" src="showTask.do"></iframe>' }]});Ext.BLANK_IMAGE_URL = 'js/ext-3.0.0//resources/images/default/s.gif'Ext.onReady( function() { var viewport = new Ext.Viewport({layout:'border',items:[new Ext.BoxComponent({region:'north',el: 'north',height:72}),{region:'west',id:'west-panel',split:true,width: 200,minSize: 175,maxSize: 600,margins:'0 0 0 0',layout:'accordion',title:'系统菜单',collapsible :true,layoutConfig:{animate:true}, items: [ {title:' ',border:false,html:'<div id="tree" style="overflow:auto;width:100%;height:100%"></div>'//iconCls:'nav' }]}, tabs//初始标签页 ]}); var tree = new Ext.tree.TreePanel( {el :'tree',autoScroll:true,rootVisible:true,loader:new Ext.tree.TreeLoader({dataUrl:'menu.action'})});var root = new Ext.tree.AsyncTreeNode( {id :'0',text :'根目录',expanded:true});tree.setRootNode(root);tree.render();tree.expand();//树的单击事件tree.on('click',function(node,e){var id=node.id;if(node.isLeaf()){var url=node.attributes.url;openInTab(id,node,e,url);}});tabs.on('contextmenu',function(tabs,tab,e){if(tab.id=='main'){return false;}var position=e.getXY();e.preventDefault();var tabContextMenu = new Ext.menu.Menu({id :'tabContextMenu'});var tabId=tab.id;tabContextMenu.addItem(new Ext.menu.Item({id :'close',text :'关闭',handler : function() {tabs.remove(tabId);}}));tabContextMenu.addItem(new Ext.menu.Item({id :'closeothers',text :'关闭其他',handler : function() {var items=tabs.items;var tabCount=items.getCount();var tabIds=new Array();var j=0;for(var i=0;i<tabCount;i++){var item=items.get(i);if(item.id!=tabId&&item.id!='main'){tabIds[j]=item.id;j++;}}for(var k=0;k<tabIds.length;k++){tabs.remove(tabIds[k]);}}}));tabContextMenu.showAt(position);});});不知道是什么地方有问题 问题补充：这个插件可以直接使用吗 是在ext-all里有定义的吗
解决方案
这种情况一般是id的原因 官方已经有这个tab右键的插件了在ux包下有个 TabCloseMenu.js代码：/*! * Ext JS Library 3.2.0 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license *//** * @class Ext.ux.TabCloseMenu * @extends Object * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects * the closable configuration on the tab. As such, commands like remove others and remove all will not * remove items that are not closable. * * @constructor * @param {Object} config The configuration options * @ptype tabclosemenu */Ext.ux.TabCloseMenu = Ext.extend(Object, { /** * @cfg {String} closeTabText * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>. */ closeTabText: 'Close Tab', /** * @cfg {String} closeOtherTabsText * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>. */ closeOtherTabsText: 'Close Other Tabs', /** * @cfg {Boolean} showCloseAll * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>. */ showCloseAll: true, /** * @cfg {String} closeAllTabsText * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>. */ closeAllTabsText: 'Close All Tabs', constructor : function(config){ Ext.apply(this, config || {}); }, //public init : function(tabs){ this.tabs = tabs; tabs.on({ scope: this, contextmenu: this.onContextMenu, destroy: this.destroy }); }, destroy : function(){ Ext.destroy(this.menu); delete this.menu; delete this.tabs; delete this.active; }, // private onContextMenu : function(tabs, item, e){ this.active = item; var m = this.createMenu(), disableAll = true, disableOthers = true, closeAll = m.getComponent('closeall'); m.getComponent('close').setDisabled(!item.closable); tabs.items.each(function(){ if(this.closable){ disableAll = false; if(this != item){ disableOthers = false; return false; } } }); m.getComponent('closeothers').setDisabled(disableOthers); if(closeAll){ closeAll.setDisabled(disableAll); } e.stopEvent(); m.showAt(e.getPoint()); }, createMenu : function(){ if(!this.menu){ var items = [{ itemId: 'close', text: this.closeTabText, scope: this, handler: this.onClose }]; if(this.showCloseAll){ items.push('-'); } items.push({ itemId: 'closeothers', text: this.closeOtherTabsText, scope: this, handler: this.onCloseOthers }); if(this.showCloseAll){ items.push({ itemId: 'closeall', text: this.closeAllTabsText, scope: this, handler: this.onCloseAll }); } this.menu = new Ext.menu.Menu({ items: items }); } return this.menu; }, onClose : function(){ this.tabs.remove(this.active); }, onCloseOthers : function(){ this.doClose(true); }, onCloseAll : function(){ this.doClose(false); }, doClose : function(excludeActive){ var items = []; this.tabs.items.each(function(item){ if(item.closable){ if(!excludeActive || item != this.active){ items.push(item); } } }, this); Ext.each(items, function(item){ this.tabs.remove(item); }, this); }});Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);使用范例：tab = new Ext.TabPanel({ activeTab:0, resizeTabs:true, // turn on tab resizing minTabWidth: 115, tabWidth:135, enableTabScroll:true, items:[{ iconCls:'desk', title:"title" }], plugins: new Ext.ux.TabCloseMenu() })
解决方案二：
看到插件里面的这段代码没？createMenu : function(){ if(!this.menu){ var items = [{ itemId: 'close', text: this.closeTabText, scope: this, handler: this.onClose }]; if(this.showCloseAll){ items.push('-'); } items.push({ itemId: 'closeothers', text: this.closeOtherTabsText, scope: this, handler: this.onCloseOthers }); if(this.showCloseAll){ items.push({ itemId: 'closeall', text: this.closeAllTabsText, scope: this, handler: this.onCloseAll }); } this.menu = new Ext.menu.Menu({ items: items }); } return this.menu; }, 只是创建一次