3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.ux.TabCloseMenu
17 * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
18 * the closable configuration on the tab. As such, commands like remove others and remove all will not
19 * remove items that are not closable.
22 * @param {Object} config The configuration options
25 Ext.define('Ext.tab.TabCloseMenu', {
26 alias: 'plugin.tabclosemenu',
27 alternateClassName: 'Ext.ux.TabCloseMenu',
30 observable: 'Ext.util.Observable'
34 * @cfg {String} closeTabText
35 * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
37 closeTabText: 'Close Tab',
40 * @cfg {Boolean} showCloseOthers
41 * Indicates whether to show the 'Close Others' option. Defaults to <tt>true</tt>.
43 showCloseOthers: true,
46 * @cfg {String} closeOtherTabsText
47 * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
49 closeOthersTabsText: 'Close Other Tabs',
52 * @cfg {Boolean} showCloseAll
53 * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>.
58 * @cfg {String} closeAllTabsText
59 * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
61 closeAllTabsText: 'Close All Tabs',
64 * @cfg {Array} extraItemsHead
65 * An array of additional context menu items to add to the front of the context menu.
70 * @cfg {Array} extraItemsTail
71 * An array of additional context menu items to add to the end of the context menu.
76 constructor: function (config) {
81 this.mixins.observable.constructor.call(this, config);
84 init : function(tabpanel){
85 this.tabPanel = tabpanel;
86 this.tabBar = tabpanel.down("tabbar");
88 this.mon(this.tabPanel, {
90 afterlayout: this.onAfterLayout,
95 onAfterLayout: function() {
96 this.mon(this.tabBar.el, {
98 contextmenu: this.onContextMenu,
103 onBeforeDestroy : function(){
104 Ext.destroy(this.menu);
105 this.callParent(arguments);
109 onContextMenu : function(event, target){
111 menu = me.createMenu(),
113 disableOthers = true,
114 tab = me.tabBar.getChildByElement(target),
115 index = me.tabBar.items.indexOf(tab);
117 me.item = me.tabPanel.getComponent(index);
118 menu.child('*[text="' + me.closeTabText + '"]').setDisabled(!me.item.closable);
120 if (me.showCloseAll || me.showCloseOthers) {
121 me.tabPanel.items.each(function(item) {
124 if (item != me.item) {
125 disableOthers = false;
132 if (me.showCloseAll) {
133 menu.child('*[text="' + me.closeAllTabsText + '"]').setDisabled(disableAll);
136 if (me.showCloseOthers) {
137 menu.child('*[text="' + me.closeOthersTabsText + '"]').setDisabled(disableOthers);
141 event.preventDefault();
142 me.fireEvent('beforemenu', menu, me.item, me);
144 menu.showAt(event.getXY());
147 createMenu : function() {
152 text: me.closeTabText,
157 if (me.showCloseAll || me.showCloseOthers) {
161 if (me.showCloseOthers) {
163 text: me.closeOthersTabsText,
165 handler: me.onCloseOthers
169 if (me.showCloseAll) {
171 text: me.closeAllTabsText,
173 handler: me.onCloseAll
177 if (me.extraItemsHead) {
178 items = me.extraItemsHead.concat(items);
181 if (me.extraItemsTail) {
182 items = items.concat(me.extraItemsTail);
185 me.menu = Ext.create('Ext.menu.Menu', {
197 onHideMenu: function () {
201 me.fireEvent('aftermenu', me.menu, me);
204 onClose : function(){
205 this.tabPanel.remove(this.item);
208 onCloseOthers : function(){
212 onCloseAll : function(){
216 doClose : function(excludeActive){
219 this.tabPanel.items.each(function(item){
221 if(!excludeActive || item != this.item){
227 Ext.each(items, function(item){
228 this.tabPanel.remove(item);