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