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