examples/ux/TabCloseMenu.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.ux.TabCloseMenu
   9  * @extends Object
  10  * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
  11  * the closable configuration on the tab. As such, commands like remove others and remove all will not
  12  * remove items that are not closable.
  13  *
  14  * @constructor
  15  * @param {Object} config The configuration options
  16  * @ptype tabclosemenu
  17  */
  18 Ext.ux.TabCloseMenu = Ext.extend(Object, {
  19     /**
  20      * @cfg {String} closeTabText
  21      * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
  22      */
  23     closeTabText: 'Close Tab',
  24
  25     /**
  26      * @cfg {String} closeOtherTabsText
  27      * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
  28      */
  29     closeOtherTabsText: 'Close Other Tabs',
  30
  31     /**
  32      * @cfg {Boolean} showCloseAll
  33      * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>.
  34      */
  35     showCloseAll: true,
  36
  37     /**
  38      * @cfg {String} closeAllTabsText
  39      * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
  40      */
  41     closeAllTabsText: 'Close All Tabs',
  42
  43     constructor : function(config){
  44         Ext.apply(this, config || {});
  45     },
  46
  47     //public
  48     init : function(tabs){
  49         this.tabs = tabs;
  50         tabs.on({
  51             scope: this,
  52             contextmenu: this.onContextMenu,
  53             destroy: this.destroy
  54         });
  55     },
  56
  57     destroy : function(){
  58         Ext.destroy(this.menu);
  59         delete this.menu;
  60         delete this.tabs;
  61         delete this.active;
  62     },
  63
  64     // private
  65     onContextMenu : function(tabs, item, e){
  66         this.active = item;
  67         var m = this.createMenu(),
  68             disableAll = true,
  69             disableOthers = true,
  70             closeAll = m.getComponent('closeall');
  71
  72         m.getComponent('close').setDisabled(!item.closable);
  73         tabs.items.each(function(){
  74             if(this.closable){
  75                 disableAll = false;
  76                 if(this != item){
  77                     disableOthers = false;
  78                     return false;
  79                 }
  80             }
  81         });
  82         m.getComponent('closeothers').setDisabled(disableOthers);
  83         if(closeAll){
  84             closeAll.setDisabled(disableAll);
  85         }
  86
  87         e.stopEvent();
  88         m.showAt(e.getPoint());
  89     },
  90
  91     createMenu : function(){
  92         if(!this.menu){
  93             var items = [{
  94                 itemId: 'close',
  95                 text: this.closeTabText,
  96                 scope: this,
  97                 handler: this.onClose
  98             }];
  99             if(this.showCloseAll){
 100                 items.push('-');
 101             }
 102             items.push({
 103                 itemId: 'closeothers',
 104                 text: this.closeOtherTabsText,
 105                 scope: this,
 106                 handler: this.onCloseOthers
 107             });
 108             if(this.showCloseAll){
 109                 items.push({
 110                     itemId: 'closeall',
 111                     text: this.closeAllTabsText,
 112                     scope: this,
 113                     handler: this.onCloseAll
 114                 });
 115             }
 116             this.menu = new Ext.menu.Menu({
 117                 items: items
 118             });
 119         }
 120         return this.menu;
 121     },
 122
 123     onClose : function(){
 124         this.tabs.remove(this.active);
 125     },
 126
 127     onCloseOthers : function(){
 128         this.doClose(true);
 129     },
 130
 131     onCloseAll : function(){
 132         this.doClose(false);
 133     },
 134
 135     doClose : function(excludeActive){
 136         var items = [];
 137         this.tabs.items.each(function(item){
 138             if(item.closable){
 139                 if(!excludeActive || item != this.active){
 140                     items.push(item);
 141                 }
 142             }
 143         }, this);
 144         Ext.each(items, function(item){
 145             this.tabs.remove(item);
 146         }, this);
 147     }
 148 });
 149
 150 Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);