Extjs多標籤關閉，支援關閉左側和右側標籤。
阿新 • • 發佈：2018-12-14
基於官方給出標籤關閉方法修改，首先先上效果圖。
/** * Plugin 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. */ Ext.define('Ext.ux.TabCloseMenu', { alias: 'plugin.tabclosemenu', mixins: { observable: 'Ext.util.Observable' }, /** * @cfg {String} closeTabText * The text for closing the current tab. */ closeTabText: 'Close Tab', /** * @cfg {Boolean} showCloseOthers * Indicates whether to show the 'Close Others' option. */ showCloseOthers: true, /** * @cfg {String} closeOthersTabsText * The text for closing all tabs except the current one. */ closeOthersTabsText: 'Close Other Tabs', /** * @cfg {Boolean} showCloseAll * Indicates whether to show the 'Close All' option. */ showCloseAll: true, /** * @cfg {String} closeAllTabsText * The text for closing all tabs. */ closeAllTabsText: 'Close All Tabs', /** * 關閉左側 * @type Boolean */ showCloseLeft:true, /** * 關閉左側 * @type String */ closeLeftText:'Close Left Tabs', /** * 關閉右側 * @type Boolean */ showCloseRight:true, /** * 關閉左側 * @type String */ closeRightText:'Close Right Tabs', /** * @cfg {Array} extraItemsHead * An array of additional context menu items to add to the front of the context menu. */ extraItemsHead: null, /** * @cfg {Array} extraItemsTail * An array of additional context menu items to add to the end of the context menu. */ extraItemsTail: null, //public constructor: function (config) { this.addEvents( 'aftermenu', 'beforemenu'); this.mixins.observable.constructor.call(this, config); }, init : function(tabpanel){ this.tabPanel = tabpanel; this.tabBar = tabpanel.down("tabbar"); this.mon(this.tabPanel, { scope: this, afterlayout: this.onAfterLayout, single: true }); }, onAfterLayout: function() { this.mon(this.tabBar.el, { scope: this, contextmenu: this.onContextMenu, delegate: '.x-tab' }); }, onBeforeDestroy : function(){ Ext.destroy(this.menu); this.callParent(arguments); }, // private onContextMenu : function(event, target){ var me = this, menu = me.createMenu(), disableAll = true, disableOthers = true, tab = me.tabBar.getChildByElement(target), index = me.tabBar.items.indexOf(tab); me.item = me.tabPanel.getComponent(index); menu.child('*[text="' + me.closeTabText + '"]').setDisabled(!me.item.closable); if (me.showCloseAll || me.showCloseOthers) { me.tabPanel.items.each(function(item) { if (item.closable) { disableAll = false; if (item != me.item) { disableOthers = false; return false; } } return true; }); if (me.showCloseAll) { menu.child('*[text="' + me.closeAllTabsText + '"]').setDisabled(disableAll); } if (me.showCloseOthers) { menu.child('*[text="' + me.closeOthersTabsText + '"]').setDisabled(disableOthers); } } if(me.showCloseLeft){ var items=new Array(); me.tabPanel.items.each(function(item) { items.push(item); }); var disableLeft=false; if(items.length==1){ disableLeft = true; }else{ if(items[0].getId()==me.item.getId()){ disableLeft = true; } if(items[1].getId()==me.item.getId()){ disableLeft = true; } } if (me.showCloseLeft) { menu.child('*[text="' + me.closeLeftText + '"]').setDisabled(disableLeft); } } if(me.showCloseRight){ var items=new Array(); me.tabPanel.items.each(function(item) { items.push(item); }); var disableRight=false; if(items[items.length-1].getId()==me.item.getId()){ disableRight = true; } if (me.showCloseRight) { menu.child('*[text="' + me.closeRightText + '"]').setDisabled(disableRight); } } event.preventDefault(); me.fireEvent('beforemenu', menu, me.item, me); menu.showAt(event.getXY()); }, createMenu : function() { var me = this; if (!me.menu) { var items = [{ text: me.closeTabText, scope: me, handler: me.onClose }]; if (me.showCloseAll || me.showCloseOthers|| me.showCloseLeft || me.showCloseRight) { items.push('-'); } if (me.showCloseLeft) { items.push({ text: me.closeLeftText, scope: me, handler: me.onCloseLeft }); } if (me.showCloseRight) { items.push({ text: me.closeRightText, scope: me, handler: me.onCloseRight }); } if (me.showCloseOthers) { items.push({ text: me.closeOthersTabsText, scope: me, handler: me.onCloseOthers }); } if (me.showCloseAll) { items.push({ text: me.closeAllTabsText, scope: me, handler: me.onCloseAll }); } if (me.extraItemsHead) { items = me.extraItemsHead.concat(items); } if (me.extraItemsTail) { items = items.concat(me.extraItemsTail); } me.menu = Ext.create('Ext.menu.Menu', { items: items, listeners: { hide: me.onHideMenu, scope: me } }); } return me.menu; }, onHideMenu: function () { var me = this; //me.item = null; 註釋該句，關閉操作正常 me.fireEvent('aftermenu', me.menu, me); }, onClose : function(){ this.tabPanel.remove(this.item); }, onCloseOthers : function(){ this.doClose(true); }, onCloseAll : function(){ this.doClose(false); }, onCloseLeft : function(){ this.doCloseLeft(); }, onCloseRight : function(){ this.doCloseRight(); }, doClose : function(excludeActive){ var items = []; this.tabPanel.items.each(function(item){ if(item.closable){ if(!excludeActive || item != this.item){ items.push(item); } } }, this); Ext.each(items, function(item){ this.tabPanel.remove(item); }, this); }, doCloseLeft : function(){ var items=[]; this.tabPanel.items.each(function(item){ if(item.closable){ if(item != this.item){ items.push(item); } if(item == this.item){ return false; } } }, this); Ext.each(items, function(item){ this.tabPanel.remove(item); }, this); }, doCloseRight : function(){ var items=[]; this.tabPanel.items.each(function(item){ items.push(item); }, this); var result= new Array(); var count=""; for(var i = 0 ;i <items.length;i++){ if(items[i].getId() == this.item.getId()){ count=i; } } for(var i = (count+1) ;i <items.length;i++){ result.push(items[i]); } Ext.each(result, function(item){ this.tabPanel.remove(item); }, this); } });
呼叫方法：
plugins: Ext.create('Ext.ux.TabCloseMenu', {
closeTabText: '關閉當前',
closeOthersTabsText: '關閉其它',
closeAllTabsText: '關閉所有',
closeLeftText:'關閉左側',
closeRightText:'關閉右側'
})