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