examples/ux/TabCloseMenu.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   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.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 /**
  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.
  20  *
  21  * @constructor
  22  * @param {Object} config The configuration options
  23  * @ptype tabclosemenu
  24  */
  25 Ext.define('Ext.tab.TabCloseMenu', {
  26     alias: 'plugin.tabclosemenu',
  27     alternateClassName: 'Ext.ux.TabCloseMenu',
  28
  29     mixins: {
  30         observable: 'Ext.util.Observable'
  31     },
  32
  33     /**
  34      * @cfg {String} closeTabText
  35      * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
  36      */
  37     closeTabText: 'Close Tab',
  38
  39     /**
  40      * @cfg {Boolean} showCloseOthers
  41      * Indicates whether to show the 'Close Others' option. Defaults to <tt>true</tt>.
  42      */
  43     showCloseOthers: true,
  44
  45     /**
  46      * @cfg {String} closeOtherTabsText
  47      * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
  48      */
  49     closeOthersTabsText: 'Close Other Tabs',
  50
  51     /**
  52      * @cfg {Boolean} showCloseAll
  53      * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>.
  54      */
  55     showCloseAll: true,
  56
  57     /**
  58      * @cfg {String} closeAllTabsText
  59      * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
  60      */
  61     closeAllTabsText: 'Close All Tabs',
  62
  63     /**
  64      * @cfg {Array} extraItemsHead
  65      * An array of additional context menu items to add to the front of the context menu.
  66      */
  67     extraItemsHead: null,
  68
  69     /**
  70      * @cfg {Array} extraItemsTail
  71      * An array of additional context menu items to add to the end of the context menu.
  72      */
  73     extraItemsTail: null,
  74
  75     //public
  76     constructor: function (config) {
  77         this.addEvents(
  78             'aftermenu',
  79             'beforemenu');
  80
  81         this.mixins.observable.constructor.call(this, config);
  82     },
  83
  84     init : function(tabpanel){
  85         this.tabPanel = tabpanel;
  86         this.tabBar = tabpanel.down("tabbar");
  87
  88         this.mon(this.tabPanel, {
  89             scope: this,
  90             afterlayout: this.onAfterLayout,
  91             single: true
  92         });
  93     },
  94
  95     onAfterLayout: function() {
  96         this.mon(this.tabBar.el, {
  97             scope: this,
  98             contextmenu: this.onContextMenu,
  99             delegate: 'div.x-tab'
 100         });
 101     },
 102
 103     onBeforeDestroy : function(){
 104         Ext.destroy(this.menu);
 105         this.callParent(arguments);
 106     },
 107
 108     // private
 109     onContextMenu : function(event, target){
 110         var me = this,
 111             menu = me.createMenu(),
 112             disableAll = true,
 113             disableOthers = true,
 114             tab = me.tabBar.getChildByElement(target),
 115             index = me.tabBar.items.indexOf(tab);
 116
 117         me.item = me.tabPanel.getComponent(index);
 118         menu.child('*[text="' + me.closeTabText + '"]').setDisabled(!me.item.closable);
 119
 120         if (me.showCloseAll || me.showCloseOthers) {
 121             me.tabPanel.items.each(function(item) {
 122                 if (item.closable) {
 123                     disableAll = false;
 124                     if (item != me.item) {
 125                         disableOthers = false;
 126                         return false;
 127                     }
 128                 }
 129                 return true;
 130             });
 131
 132             if (me.showCloseAll) {
 133                 menu.child('*[text="' + me.closeAllTabsText + '"]').setDisabled(disableAll);
 134             }
 135
 136             if (me.showCloseOthers) {
 137                 menu.child('*[text="' + me.closeOthersTabsText + '"]').setDisabled(disableOthers);
 138             }
 139         }
 140
 141         event.preventDefault();
 142         me.fireEvent('beforemenu', menu, me.item, me);
 143
 144         menu.showAt(event.getXY());
 145     },
 146
 147     createMenu : function() {
 148         var me = this;
 149
 150         if (!me.menu) {
 151             var items = [{
 152                 text: me.closeTabText,
 153                 scope: me,
 154                 handler: me.onClose
 155             }];
 156
 157             if (me.showCloseAll || me.showCloseOthers) {
 158                 items.push('-');
 159             }
 160
 161             if (me.showCloseOthers) {
 162                 items.push({
 163                     text: me.closeOthersTabsText,
 164                     scope: me,
 165                     handler: me.onCloseOthers
 166                 });
 167             }
 168
 169             if (me.showCloseAll) {
 170                 items.push({
 171                     text: me.closeAllTabsText,
 172                     scope: me,
 173                     handler: me.onCloseAll
 174                 });
 175             }
 176
 177             if (me.extraItemsHead) {
 178                 items = me.extraItemsHead.concat(items);
 179             }
 180
 181             if (me.extraItemsTail) {
 182                 items = items.concat(me.extraItemsTail);
 183             }
 184
 185             me.menu = Ext.create('Ext.menu.Menu', {
 186                 items: items,
 187                 listeners: {
 188                     hide: me.onHideMenu,
 189                     scope: me
 190                 }
 191             });
 192         }
 193
 194         return me.menu;
 195     },
 196
 197     onHideMenu: function () {
 198         var me = this;
 199
 200         me.item = null;
 201         me.fireEvent('aftermenu', me.menu, me);
 202     },
 203
 204     onClose : function(){
 205         this.tabPanel.remove(this.item);
 206     },
 207
 208     onCloseOthers : function(){
 209         this.doClose(true);
 210     },
 211
 212     onCloseAll : function(){
 213         this.doClose(false);
 214     },
 215
 216     doClose : function(excludeActive){
 217         var items = [];
 218
 219         this.tabPanel.items.each(function(item){
 220             if(item.closable){
 221                 if(!excludeActive || item != this.item){
 222                     items.push(item);
 223                 }
 224             }
 225         }, this);
 226
 227         Ext.each(items, function(item){
 228             this.tabPanel.remove(item);
 229         }, this);
 230     }
 231 });
 232