docs/source/Bar.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-tab.Bar'>/**
   2 </span> * @author Ed Spencer
   3  * @class Ext.tab.Bar
   4  * @extends Ext.panel.Header
   5  * &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;
   6  *
   7  * @xtype tabbar
   8  */
   9 Ext.define('Ext.tab.Bar', {
  10     extend: 'Ext.panel.Header',
  11     alias: 'widget.tabbar',
  12     baseCls: Ext.baseCSSPrefix + 'tab-bar',
  13
  14     requires: [
  15         'Ext.tab.Tab',
  16         'Ext.FocusManager'
  17     ],
  18
  19     // @private
  20     defaultType: 'tab',
  21
  22 <span id='Ext-tab.Bar-cfg-Boolean'>    /**
  23 </span>     * @cfg Boolean plain
  24      * True to not show the full background on the tabbar
  25      */
  26     plain: false,
  27
  28     // @private
  29     renderTpl: [
  30         '&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;',
  31         '&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;'
  32     ],
  33
  34 <span id='Ext-tab.Bar-cfg-minTabWidth'>    /**
  35 </span>     * @cfg {Number} minTabWidth The minimum width for each tab. Defaults to &lt;tt&gt;30&lt;/tt&gt;.
  36      */
  37     minTabWidth: 30,
  38
  39 <span id='Ext-tab.Bar-cfg-maxTabWidth'>    /**
  40 </span>     * @cfg {Number} maxTabWidth The maximum width for each tab. Defaults to &lt;tt&gt;undefined&lt;/tt&gt;.
  41      */
  42     maxTabWidth: undefined,
  43
  44     // @private
  45     initComponent: function() {
  46         var me = this,
  47             keys;
  48
  49         if (me.plain) {
  50             me.setUI(me.ui + '-plain');
  51         }
  52
  53         me.addClsWithUI(me.dock);
  54
  55         me.addEvents(
  56 <span id='Ext-tab.Bar-event-change'>            /**
  57 </span>             * @event change
  58              * Fired when the currently-active tab has changed
  59              * @param {Ext.tab.Bar} tabBar The TabBar
  60              * @param {Ext.Tab} tab The new Tab
  61              * @param {Ext.Component} card The card that was just shown in the TabPanel
  62              */
  63             'change'
  64         );
  65
  66         Ext.applyIf(this.renderSelectors, {
  67             body : '.' + this.baseCls + '-body',
  68             strip: '.' + this.baseCls + '-strip'
  69         });
  70         me.callParent(arguments);
  71
  72         // TabBar must override the Header's align setting.
  73         me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
  74         me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);
  75         me.items.removeAt(me.items.getCount() - 1);
  76         me.items.removeAt(me.items.getCount() - 1);
  77
  78         // Subscribe to Ext.FocusManager for key navigation
  79         keys = me.orientation == 'vertical' ? ['up', 'down'] : ['left', 'right'];
  80         Ext.FocusManager.subscribe(me, {
  81             keys: keys
  82         });
  83     },
  84
  85     // @private
  86     onAdd: function(tab) {
  87         var me = this,
  88             tabPanel = me.tabPanel,
  89             hasOwner = !!tabPanel;
  90
  91         me.callParent(arguments);
  92         tab.position = me.dock;
  93         if (hasOwner) {
  94             tab.minWidth = tabPanel.minTabWidth;
  95         }
  96         else {
  97             tab.minWidth = me.minTabWidth + (tab.iconCls ? 25 : 0);
  98         }
  99         tab.maxWidth = me.maxTabWidth || (hasOwner ? tabPanel.maxTabWidth : undefined);
 100     },
 101
 102     // @private
 103     afterRender: function() {
 104         var me = this;
 105
 106         me.mon(me.el, {
 107             scope: me,
 108             click: me.onClick,
 109             delegate: '.' + Ext.baseCSSPrefix + 'tab'
 110         });
 111         me.callParent(arguments);
 112
 113     },
 114
 115     afterComponentLayout : function() {
 116         var me = this;
 117
 118         me.callParent(arguments);
 119         me.strip.setWidth(me.el.getWidth());
 120     },
 121
 122     // @private
 123     onClick: function(e, target) {
 124         // The target might not be a valid tab el.
 125         var tab = Ext.getCmp(target.id),
 126             tabPanel = this.tabPanel;
 127
 128         target = e.getTarget();
 129
 130         if (tab &amp;&amp; tab.isDisabled &amp;&amp; !tab.isDisabled()) {
 131             if (tab.closable &amp;&amp; target === tab.closeEl.dom) {
 132                 tab.onCloseClick();
 133             } else {
 134                 this.setActiveTab(tab);
 135                 if (tabPanel) {
 136                     tabPanel.setActiveTab(tab.card);
 137                 }
 138                 tab.focus();
 139             }
 140         }
 141     },
 142
 143 <span id='Ext-tab.Bar-method-closeTab'>    /**
 144 </span>     * @private
 145      * Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
 146      * @param {Ext.Tab} tab The tab to close
 147      */
 148     closeTab: function(tab) {
 149         var card    = tab.card,
 150             tabPanel = this.tabPanel,
 151             nextTab;
 152
 153         if (tab.active &amp;&amp; this.items.getCount() &gt; 1) {
 154             nextTab = tab.next('tab') || this.items.items[0];
 155             this.setActiveTab(nextTab);
 156             if (tabPanel) {
 157                 tabPanel.setActiveTab(nextTab.card);
 158             }
 159         }
 160         this.remove(tab);
 161
 162         if (tabPanel &amp;&amp; card) {
 163             tabPanel.remove(card);
 164         }
 165
 166         if (nextTab) {
 167             nextTab.focus();
 168         }
 169     },
 170
 171 <span id='Ext-tab.Bar-method-setActiveTab'>    /**
 172 </span>     * @private
 173      * Marks the given tab as active
 174      * @param {Ext.Tab} tab The tab to mark active
 175      */
 176     setActiveTab: function(tab) {
 177         if (tab.disabled) {
 178             return;
 179         }
 180         var me = this;
 181         if (me.activeTab) {
 182             me.activeTab.deactivate();
 183         }
 184         tab.activate();
 185
 186         if (me.rendered) {
 187             me.layout.layout();
 188             tab.el.scrollIntoView(me.layout.getRenderTarget());
 189         }
 190         me.activeTab = tab;
 191         me.fireEvent('change', me, tab, tab.card);
 192     }
 193 });</pre></pre></body></html>