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