Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / 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>