examples/docs/source/TabCloseMenu.html

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