docs/source/Bar.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-Bar'>/**
  19 </span> * @author Ed Spencer
  20  * @class Ext.tab.Bar
  21  * @extends Ext.panel.Header
  22  * &lt;p&gt;TabBar is used internally by a {@link Ext.tab.Panel TabPanel} and wouldn't usually need to be created manually.&lt;/p&gt;
  23  */
  24 Ext.define('Ext.tab.Bar', {
  25     extend: 'Ext.panel.Header',
  26     alias: 'widget.tabbar',
  27     baseCls: Ext.baseCSSPrefix + 'tab-bar',
  28
  29     requires: [
  30         'Ext.tab.Tab',
  31         'Ext.FocusManager'
  32     ],
  33
  34     // @private
  35     defaultType: 'tab',
  36
  37 <span id='Ext-tab-Bar-cfg-Boolean'>    /**
  38 </span>     * @cfg Boolean plain
  39      * True to not show the full background on the tabbar
  40      */
  41     plain: false,
  42
  43     // @private
  44     renderTpl: [
  45         '&lt;div class=&quot;{baseCls}-body&lt;tpl if=&quot;ui&quot;&gt; {baseCls}-body-{ui}&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-body-{parent.ui}-{.}&lt;/tpl&gt;&lt;/tpl&gt;&quot;&lt;tpl if=&quot;bodyStyle&quot;&gt; style=&quot;{bodyStyle}&quot;&lt;/tpl&gt;&gt;&lt;/div&gt;',
  46         '&lt;div class=&quot;{baseCls}-strip&lt;tpl if=&quot;ui&quot;&gt; {baseCls}-strip-{ui}&lt;tpl for=&quot;uiCls&quot;&gt; {parent.baseCls}-strip-{parent.ui}-{.}&lt;/tpl&gt;&lt;/tpl&gt;&quot;&gt;&lt;/div&gt;'
  47     ],
  48
  49 <span id='Ext-tab-Bar-cfg-minTabWidth'>    /**
  50 </span>     * @cfg {Number} minTabWidth The minimum width for each tab. Defaults to &lt;tt&gt;30&lt;/tt&gt;.
  51      */
  52     minTabWidth: 30,
  53
  54 <span id='Ext-tab-Bar-cfg-maxTabWidth'>    /**
  55 </span>     * @cfg {Number} maxTabWidth The maximum width for each tab. Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
  56      */
  57     maxTabWidth: undefined,
  58
  59     // @private
  60     initComponent: function() {
  61         var me = this,
  62             keys;
  63
  64         if (me.plain) {
  65             me.setUI(me.ui + '-plain');
  66         }
  67
  68         me.addClsWithUI(me.dock);
  69
  70         me.addEvents(
  71 <span id='Ext-tab-Bar-event-change'>            /**
  72 </span>             * @event change
  73              * Fired when the currently-active tab has changed
  74              * @param {Ext.tab.Bar} tabBar The TabBar
  75              * @param {Ext.Tab} tab The new Tab
  76              * @param {Ext.Component} card The card that was just shown in the TabPanel
  77              */
  78             'change'
  79         );
  80
  81         Ext.applyIf(me.renderSelectors, {
  82             body : '.' + me.baseCls + '-body',
  83             strip: '.' + me.baseCls + '-strip'
  84         });
  85         me.callParent(arguments);
  86
  87         // TabBar must override the Header's align setting.
  88         me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
  89         me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);
  90         me.items.removeAt(me.items.getCount() - 1);
  91         me.items.removeAt(me.items.getCount() - 1);
  92
  93         // Subscribe to Ext.FocusManager for key navigation
  94         keys = me.orientation == 'vertical' ? ['up', 'down'] : ['left', 'right'];
  95         Ext.FocusManager.subscribe(me, {
  96             keys: keys
  97         });
  98     },
  99
 100     // @private
 101     onAdd: function(tab) {
 102         var me = this,
 103             tabPanel = me.tabPanel,
 104             hasOwner = !!tabPanel;
 105
 106         me.callParent(arguments);
 107         tab.position = me.dock;
 108         if (hasOwner) {
 109             tab.minWidth = tabPanel.minTabWidth;
 110         }
 111         else {
 112             tab.minWidth = me.minTabWidth + (tab.iconCls ? 25 : 0);
 113         }
 114         tab.maxWidth = me.maxTabWidth || (hasOwner ? tabPanel.maxTabWidth : undefined);
 115     },
 116
 117     // @private
 118     afterRender: function() {
 119         var me = this;
 120
 121         me.mon(me.el, {
 122             scope: me,
 123             click: me.onClick,
 124             delegate: '.' + Ext.baseCSSPrefix + 'tab'
 125         });
 126         me.callParent(arguments);
 127
 128     },
 129
 130     afterComponentLayout : function() {
 131         var me = this;
 132
 133         me.callParent(arguments);
 134         me.strip.setWidth(me.el.getWidth());
 135     },
 136
 137     // @private
 138     onClick: function(e, target) {
 139         // The target might not be a valid tab el.
 140         var tab = Ext.getCmp(target.id),
 141             tabPanel = this.tabPanel,
 142             allowActive = true;
 143
 144         target = e.getTarget();
 145
 146         if (tab &amp;&amp; tab.isDisabled &amp;&amp; !tab.isDisabled()) {
 147             if (tab.closable &amp;&amp; target === tab.closeEl.dom) {
 148                 tab.onCloseClick();
 149             } else {
 150                 if (tabPanel) {
 151                     // TabPanel will card setActiveTab of the TabBar
 152                     tabPanel.setActiveTab(tab.card);
 153                 } else {
 154                     this.setActiveTab(tab);
 155                 }
 156                 tab.focus();
 157             }
 158         }
 159     },
 160
 161 <span id='Ext-tab-Bar-method-closeTab'>    /**
 162 </span>     * @private
 163      * Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
 164      * @param {Ext.Tab} tab The tab to close
 165      */
 166     closeTab: function(tab) {
 167         var me = this,
 168             card = tab.card,
 169             tabPanel = me.tabPanel,
 170             nextTab;
 171
 172         if (card &amp;&amp; card.fireEvent('beforeclose', card) === false) {
 173             return false;
 174         }
 175
 176         if (tab.active &amp;&amp; me.items.getCount() &gt; 1) {
 177             nextTab = tab.next('tab') || me.items.items[0];
 178             me.setActiveTab(nextTab);
 179             if (tabPanel) {
 180                 tabPanel.setActiveTab(nextTab.card);
 181             }
 182         }
 183         /*
 184          * force the close event to fire. By the time this function returns,
 185          * the tab is already destroyed and all listeners have been purged
 186          * so the tab can't fire itself.
 187          */
 188         tab.fireClose();
 189         me.remove(tab);
 190
 191         if (tabPanel &amp;&amp; card) {
 192             card.fireEvent('close', card);
 193             tabPanel.remove(card);
 194         }
 195
 196         if (nextTab) {
 197             nextTab.focus();
 198         }
 199     },
 200
 201 <span id='Ext-tab-Bar-method-setActiveTab'>    /**
 202 </span>     * @private
 203      * Marks the given tab as active
 204      * @param {Ext.Tab} tab The tab to mark active
 205      */
 206     setActiveTab: function(tab) {
 207         if (tab.disabled) {
 208             return;
 209         }
 210         var me = this;
 211         if (me.activeTab) {
 212             me.activeTab.deactivate();
 213         }
 214         tab.activate();
 215
 216         if (me.rendered) {
 217             me.layout.layout();
 218             tab.el.scrollIntoView(me.layout.getRenderTarget());
 219         }
 220         me.activeTab = tab;
 221         me.fireEvent('change', me, tab, tab.card);
 222     }
 223 });</pre>
 224 </body>
 225 </html>