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