X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..530ef4b6c5b943cfa68b779d11cf7de29aa878bf:/examples/ux/TabCloseMenu.js diff --git a/examples/ux/TabCloseMenu.js b/examples/ux/TabCloseMenu.js index 72a96496..6725fc1d 100644 --- a/examples/ux/TabCloseMenu.js +++ b/examples/ux/TabCloseMenu.js @@ -1,58 +1,150 @@ /*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC + * Ext JS Library 3.2.1 + * 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. - * - * @ptype tabclosemenu - */ -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({ - items: [{ - id: tabs.id + '-close', - text: 'Close Tab', - handler : function(){ - tabs.remove(ctxItem); - } - },{ - id: tabs.id + '-close-others', - text: 'Close Other Tabs', - handler : function(){ - tabs.items.each(function(item){ - if(item.closable && item != ctxItem){ - 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); - e.stopEvent(); - menu.showAt(e.getPoint()); - } -}; - -Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu); +/** + * @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 'Close Tab'. + */ + closeTabText: 'Close Tab', + + /** + * @cfg {String} closeOtherTabsText + * The text for closing all tabs except the current one. Defaults to 'Close Other Tabs'. + */ + closeOtherTabsText: 'Close Other Tabs', + + /** + * @cfg {Boolean} showCloseAll + * Indicates whether to show the 'Close All' option. Defaults to true. + */ + showCloseAll: true, + + /** + * @cfg {String} closeAllTabsText + *
The text for closing all tabs. Defaults to 'Close All Tabs'. + */ + 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); \ No newline at end of file