3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
17 * TabBar is used internally by a {@link Ext.tab.Panel TabPanel} and typically should not need to be created manually.
18 * The tab bar automatically removes the default title provided by {@link Ext.panel.Header}
20 Ext.define('Ext.tab.Bar', {
21 extend: 'Ext.panel.Header',
22 alias: 'widget.tabbar',
23 baseCls: Ext.baseCSSPrefix + 'tab-bar',
33 * @cfg {String} title @hide
37 * @cfg {String} iconCls @hide
44 * @cfg {Boolean} plain
45 * True to not show the full background on the tabbar
51 '<div id="{id}-body" class="{baseCls}-body <tpl if="bodyCls"> {bodyCls}</tpl> <tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>></div>',
52 '<div id="{id}-strip" class="{baseCls}-strip<tpl if="ui"> {baseCls}-strip-{ui}<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl></tpl>"></div>'
56 * @cfg {Number} minTabWidth
57 * The minimum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#minTabWidth minTabWidth} value.
58 * @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#minTabWidth minTabWidth} config on the TabPanel.
62 * @cfg {Number} maxTabWidth
63 * The maximum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#maxTabWidth maxTabWidth} value.
64 * @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#maxTabWidth maxTabWidth} config on the TabPanel.
68 initComponent: function() {
73 me.setUI(me.ui + '-plain');
76 me.addClsWithUI(me.dock);
81 * Fired when the currently-active tab has changed
82 * @param {Ext.tab.Bar} tabBar The TabBar
83 * @param {Ext.tab.Tab} tab The new Tab
84 * @param {Ext.Component} card The card that was just shown in the TabPanel
89 me.addChildEls('body', 'strip');
90 me.callParent(arguments);
92 // TabBar must override the Header's align setting.
93 me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
94 me.layout.overflowHandler = Ext.create('Ext.layout.container.boxOverflow.Scroller', me.layout);
96 me.remove(me.titleCmp);
99 // Subscribe to Ext.FocusManager for key navigation
100 keys = me.orientation == 'vertical' ? ['up', 'down'] : ['left', 'right'];
101 Ext.FocusManager.subscribe(me, {
105 Ext.apply(me.renderData, {
111 onAdd: function(tab) {
112 tab.position = this.dock;
113 this.callParent(arguments);
116 onRemove: function(tab) {
119 if (tab === me.previousTab) {
120 me.previousTab = null;
122 if (me.items.getCount() === 0) {
125 me.callParent(arguments);
129 afterRender: function() {
135 delegate: '.' + Ext.baseCSSPrefix + 'tab'
137 me.callParent(arguments);
141 afterComponentLayout : function() {
144 me.callParent(arguments);
145 me.strip.setWidth(me.el.getWidth());
149 onClick: function(e, target) {
150 // The target might not be a valid tab el.
151 var tab = Ext.getCmp(target.id),
152 tabPanel = this.tabPanel;
154 target = e.getTarget();
156 if (tab && tab.isDisabled && !tab.isDisabled()) {
157 if (tab.closable && target === tab.closeEl.dom) {
161 // TabPanel will card setActiveTab of the TabBar
162 tabPanel.setActiveTab(tab.card);
164 this.setActiveTab(tab);
173 * Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
174 * @param {Ext.tab.Tab} tab The tab to close
176 closeTab: function(tab) {
179 tabPanel = me.tabPanel,
182 if (card && card.fireEvent('beforeclose', card) === false) {
186 if (tab.active && me.items.getCount() > 1) {
187 nextTab = me.previousTab || tab.next('tab') || me.items.first();
188 me.setActiveTab(nextTab);
190 tabPanel.setActiveTab(nextTab.card);
194 * force the close event to fire. By the time this function returns,
195 * the tab is already destroyed and all listeners have been purged
196 * so the tab can't fire itself.
201 if (tabPanel && card) {
202 card.fireEvent('close', card);
203 tabPanel.remove(card);
213 * Marks the given tab as active
214 * @param {Ext.tab.Tab} tab The tab to mark active
216 setActiveTab: function(tab) {
222 me.previousTab = me.activeTab;
223 me.activeTab.deactivate();
229 tab.el && tab.el.scrollIntoView(me.layout.getRenderTarget());
232 me.fireEvent('change', me, tab, tab.card);