docs/source/Tab2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-tab-Tab'>/**
  19 </span> * @author Ed Spencer
  20  * @class Ext.tab.Tab
  21  * @extends Ext.button.Button
  22  *
  23  * &lt;p&gt;Represents a single Tab in a {@link Ext.tab.Panel TabPanel}. A Tab is simply a slightly customized {@link Ext.button.Button Button},
  24  * styled to look like a tab. Tabs are optionally closable, and can also be disabled. Typically you will not
  25  * need to create Tabs manually as the framework does so automatically when you use a {@link Ext.tab.Panel TabPanel}&lt;/p&gt;
  26  */
  27 Ext.define('Ext.tab.Tab', {
  28     extend: 'Ext.button.Button',
  29     alias: 'widget.tab',
  30
  31     requires: [
  32         'Ext.layout.component.Tab',
  33         'Ext.util.KeyNav'
  34     ],
  35
  36     componentLayout: 'tab',
  37
  38     isTab: true,
  39
  40     baseCls: Ext.baseCSSPrefix + 'tab',
  41
  42 <span id='Ext-tab-Tab-cfg-activeCls'>    /**
  43 </span>     * @cfg {String} activeCls
  44      * The CSS class to be applied to a Tab when it is active.
  45      * Providing your own CSS for this class enables you to customize the active state.
  46      */
  47     activeCls: 'active',
  48
  49 <span id='Ext-tab-Tab-cfg-disabledCls'>    /**
  50 </span>     * @cfg {String} disabledCls
  51      * The CSS class to be applied to a Tab when it is disabled.
  52      */
  53
  54 <span id='Ext-tab-Tab-cfg-closableCls'>    /**
  55 </span>     * @cfg {String} closableCls
  56      * The CSS class which is added to the tab when it is closable
  57      */
  58     closableCls: 'closable',
  59
  60 <span id='Ext-tab-Tab-cfg-closable'>    /**
  61 </span>     * @cfg {Boolean} closable True to make the Tab start closable (the close icon will be visible).
  62      */
  63     closable: true,
  64
  65 <span id='Ext-tab-Tab-cfg-closeText'>    /**
  66 </span>     * @cfg {String} closeText
  67      * The accessible text label for the close button link; only used when {@link #closable} = true.
  68      */
  69     closeText: 'Close Tab',
  70
  71 <span id='Ext-tab-Tab-property-active'>    /**
  72 </span>     * @property {Boolean} active
  73      * Read-only property indicating that this tab is currently active. This is NOT a public configuration.
  74      */
  75     active: false,
  76
  77 <span id='Ext-tab-Tab-property-closable'>    /**
  78 </span>     * @property closable
  79      * @type Boolean
  80      * True if the tab is currently closable
  81      */
  82
  83     scale: false,
  84
  85     position: 'top',
  86
  87     initComponent: function() {
  88         var me = this;
  89
  90         me.addEvents(
  91 <span id='Ext-tab-Tab-event-activate'>            /**
  92 </span>             * @event activate
  93              * Fired when the tab is activated.
  94              * @param {Ext.tab.Tab} this
  95              */
  96             'activate',
  97
  98 <span id='Ext-tab-Tab-event-deactivate'>            /**
  99 </span>             * @event deactivate
 100              * Fired when the tab is deactivated.
 101              * @param {Ext.tab.Tab} this
 102              */
 103             'deactivate',
 104
 105 <span id='Ext-tab-Tab-event-beforeclose'>            /**
 106 </span>             * @event beforeclose
 107              * Fires if the user clicks on the Tab's close button, but before the {@link #close} event is fired. Return
 108              * false from any listener to stop the close event being fired
 109              * @param {Ext.tab.Tab} tab The Tab object
 110              */
 111             'beforeclose',
 112
 113 <span id='Ext-tab-Tab-event-close'>            /**
 114 </span>             * @event close
 115              * Fires to indicate that the tab is to be closed, usually because the user has clicked the close button.
 116              * @param {Ext.tab.Tab} tab The Tab object
 117              */
 118             'close'
 119         );
 120
 121         me.callParent(arguments);
 122
 123         if (me.card) {
 124             me.setCard(me.card);
 125         }
 126     },
 127
 128 <span id='Ext-tab-Tab-method-onRender'>    /**
 129 </span>     * @ignore
 130      */
 131     onRender: function() {
 132         var me = this,
 133             tabBar = me.up('tabbar'),
 134             tabPanel = me.up('tabpanel');
 135
 136         me.addClsWithUI(me.position);
 137
 138         // Set all the state classNames, as they need to include the UI
 139         // me.disabledCls = me.getClsWithUIs('disabled');
 140
 141         me.syncClosableUI();
 142
 143         // Propagate minTabWidth and maxTabWidth settings from the owning TabBar then TabPanel
 144         if (!me.minWidth) {
 145             me.minWidth = (tabBar) ? tabBar.minTabWidth : me.minWidth;
 146             if (!me.minWidth &amp;&amp; tabPanel) {
 147                 me.minWidth = tabPanel.minTabWidth;
 148             }
 149             if (me.minWidth &amp;&amp; me.iconCls) {
 150                 me.minWidth += 25;
 151             }
 152         }
 153         if (!me.maxWidth) {
 154             me.maxWidth = (tabBar) ? tabBar.maxTabWidth : me.maxWidth;
 155             if (!me.maxWidth &amp;&amp; tabPanel) {
 156                 me.maxWidth = tabPanel.maxTabWidth;
 157             }
 158         }
 159
 160         me.callParent(arguments);
 161
 162         if (me.active) {
 163             me.activate(true);
 164         }
 165
 166         me.syncClosableElements();
 167
 168         me.keyNav = Ext.create('Ext.util.KeyNav', me.el, {
 169             enter: me.onEnterKey,
 170             del: me.onDeleteKey,
 171             scope: me
 172         });
 173     },
 174
 175     // inherit docs
 176     enable : function(silent) {
 177         var me = this;
 178
 179         me.callParent(arguments);
 180
 181         me.removeClsWithUI(me.position + '-disabled');
 182
 183         return me;
 184     },
 185
 186     // inherit docs
 187     disable : function(silent) {
 188         var me = this;
 189
 190         me.callParent(arguments);
 191
 192         me.addClsWithUI(me.position + '-disabled');
 193
 194         return me;
 195     },
 196
 197 <span id='Ext-tab-Tab-method-onDestroy'>    /**
 198 </span>     * @ignore
 199      */
 200     onDestroy: function() {
 201         var me = this;
 202
 203         if (me.closeEl) {
 204             me.closeEl.un('click', Ext.EventManager.preventDefault);
 205             me.closeEl = null;
 206         }
 207
 208         Ext.destroy(me.keyNav);
 209         delete me.keyNav;
 210
 211         me.callParent(arguments);
 212     },
 213
 214 <span id='Ext-tab-Tab-method-setClosable'>    /**
 215 </span>     * Sets the tab as either closable or not
 216      * @param {Boolean} closable Pass false to make the tab not closable. Otherwise the tab will be made closable (eg a
 217      * close button will appear on the tab)
 218      */
 219     setClosable: function(closable) {
 220         var me = this;
 221
 222         // Closable must be true if no args
 223         closable = (!arguments.length || !!closable);
 224
 225         if (me.closable != closable) {
 226             me.closable = closable;
 227
 228             // set property on the user-facing item ('card'):
 229             if (me.card) {
 230                 me.card.closable = closable;
 231             }
 232
 233             me.syncClosableUI();
 234
 235             if (me.rendered) {
 236                 me.syncClosableElements();
 237
 238                 // Tab will change width to accommodate close icon
 239                 me.doComponentLayout();
 240                 if (me.ownerCt) {
 241                     me.ownerCt.doLayout();
 242                 }
 243             }
 244         }
 245     },
 246
 247 <span id='Ext-tab-Tab-method-syncClosableElements'>    /**
 248 </span>     * This method ensures that the closeBtn element exists or not based on 'closable'.
 249      * @private
 250      */
 251     syncClosableElements: function () {
 252         var me = this;
 253
 254         if (me.closable) {
 255             if (!me.closeEl) {
 256                 me.closeEl = me.el.createChild({
 257                     tag: 'a',
 258                     cls: me.baseCls + '-close-btn',
 259                     href: '#',
 260                     // html: me.closeText, // removed for EXTJSIV-1719, by rob@sencha.com
 261                     title: me.closeText
 262                 }).on('click', Ext.EventManager.preventDefault);  // mon ???
 263             }
 264         } else {
 265             var closeEl = me.closeEl;
 266             if (closeEl) {
 267                 closeEl.un('click', Ext.EventManager.preventDefault);
 268                 closeEl.remove();
 269                 me.closeEl = null;
 270             }
 271         }
 272     },
 273
 274 <span id='Ext-tab-Tab-method-syncClosableUI'>    /**
 275 </span>     * This method ensures that the UI classes are added or removed based on 'closable'.
 276      * @private
 277      */
 278     syncClosableUI: function () {
 279         var me = this, classes = [me.closableCls, me.closableCls + '-' + me.position];
 280
 281         if (me.closable) {
 282             me.addClsWithUI(classes);
 283         } else {
 284             me.removeClsWithUI(classes);
 285         }
 286     },
 287
 288 <span id='Ext-tab-Tab-method-setCard'>    /**
 289 </span>     * Sets this tab's attached card. Usually this is handled automatically by the {@link Ext.tab.Panel} that this Tab
 290      * belongs to and would not need to be done by the developer
 291      * @param {Ext.Component} card The card to set
 292      */
 293     setCard: function(card) {
 294         var me = this;
 295
 296         me.card = card;
 297         me.setText(me.title || card.title);
 298         me.setIconCls(me.iconCls || card.iconCls);
 299     },
 300
 301 <span id='Ext-tab-Tab-method-onCloseClick'>    /**
 302 </span>     * @private
 303      * Listener attached to click events on the Tab's close button
 304      */
 305     onCloseClick: function() {
 306         var me = this;
 307
 308         if (me.fireEvent('beforeclose', me) !== false) {
 309             if (me.tabBar) {
 310                 if (me.tabBar.closeTab(me) === false) {
 311                     // beforeclose on the panel vetoed the event, stop here
 312                     return;
 313                 }
 314             } else {
 315                 // if there's no tabbar, fire the close event
 316                 me.fireEvent('close', me);
 317             }
 318         }
 319     },
 320
 321 <span id='Ext-tab-Tab-method-fireClose'>    /**
 322 </span>     * Fires the close event on the tab.
 323      * @private
 324      */
 325     fireClose: function(){
 326         this.fireEvent('close', this);
 327     },
 328
 329 <span id='Ext-tab-Tab-method-onEnterKey'>    /**
 330 </span>     * @private
 331      */
 332     onEnterKey: function(e) {
 333         var me = this;
 334
 335         if (me.tabBar) {
 336             me.tabBar.onClick(e, me.el);
 337         }
 338     },
 339
 340 <span id='Ext-tab-Tab-method-onDeleteKey'>   /**
 341 </span>     * @private
 342      */
 343     onDeleteKey: function(e) {
 344         var me = this;
 345
 346         if (me.closable) {
 347             me.onCloseClick();
 348         }
 349     },
 350
 351     // @private
 352     activate : function(supressEvent) {
 353         var me = this;
 354
 355         me.active = true;
 356         me.addClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
 357
 358         if (supressEvent !== true) {
 359             me.fireEvent('activate', me);
 360         }
 361     },
 362
 363     // @private
 364     deactivate : function(supressEvent) {
 365         var me = this;
 366
 367         me.active = false;
 368         me.removeClsWithUI([me.activeCls, me.position + '-' + me.activeCls]);
 369
 370         if (supressEvent !== true) {
 371             me.fireEvent('deactivate', me);
 372         }
 373     }
 374 });
 375 </pre>
 376 </body>
 377 </html>