Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / 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>