3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
9 * <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
10 * for layout purposes, but also have special support for containing child Components
11 * (<tt>{@link Ext.Container#items items}</tt>) that are managed using a
12 * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.</p>
14 * <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component
15 * and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable
16 * re-use of a tab, configure the TabPanel with <b><code>{@link #autoDestroy autoDestroy: false}</code></b>.
18 * <p><b><u>TabPanel header/footer elements</u></b></p>
19 * <p>TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
20 * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
21 * This means that a TabPanel will not display any configured title, and will not display any
22 * configured header {@link Ext.Panel#tools tools}.</p>
23 * <p>To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
24 * <b><tt>{@link Ext.Container#layout layout:'fit'}</tt></b>.</p>
26 * <p><b><u>Tab Events</u></b></p>
27 * <p>There is no actual tab class — each tab is simply a {@link Ext.BoxComponent Component}
28 * such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component
29 * can fire additional events that only exist for tabs and are not available from other Components.
30 * These events are:</p>
31 * <div><ul class="mdetail-params">
32 * <li><tt><b>{@link Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes
33 * the active tab.</li>
34 * <li><tt><b>{@link Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that
35 * was the active tab becomes deactivated.</li>
37 * <p><b><u>Creating TabPanels from Code</u></b></p>
38 * <p>TabPanels can be created and rendered completely in code, as in this example:</p>
40 var tabs = new Ext.TabPanel({
41 renderTo: Ext.getBody(),
52 * <p><b><u>Creating TabPanels from Existing Markup</u></b></p>
53 * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p>
54 * <div><ul class="mdetail-params">
56 * <li>Pre-Structured Markup</li>
57 * <div class="sub-desc">
58 * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely
59 * from existing markup (See the {@link #autoTabs} example).</p>
62 * <li>Un-Structured Markup</li>
63 * <div class="sub-desc">
64 * <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
65 * which elements should be the container and the tabs. Using this method tab content can be pulled from different
66 * elements within the page by id regardless of page structure. For example:</p>
68 var tabs = new Ext.TabPanel({
72 {contentEl:'tab1', title:'Tab 1'},
73 {contentEl:'tab2', title:'Tab 2'}
77 // Note that the tabs do not have to be nested within the container (although they can be)
78 <div id="my-tabs"></div>
79 <div id="tab1" class="x-hide-display">A simple tab</div>
80 <div id="tab2" class="x-hide-display">Another one</div>
82 * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
83 * deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt>
84 * to render all content tabs on page load.
91 * @param {Object} config The configuration options
94 Ext.TabPanel = Ext.extend(Ext.Panel, {
96 * @cfg {Boolean} layoutOnTabChange
97 * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
98 * See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
101 * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
102 * class name applied to the tab strip item representing the child Component, allowing special
103 * styling to be applied.
106 * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
107 * browser resize (defaults to true).
109 monitorResize : true,
111 * @cfg {Boolean} deferredRender
112 * <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt>
113 * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
114 * <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout}
115 * is rendered. If there is a significant amount of content or a lot of heavy controls being
116 * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
117 * improve performance.</p>
118 * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
119 * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
120 * configuration value.</p>
121 * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
122 * within an unactivated tab will not be available. For example, this means that if the TabPanel
123 * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
124 * unactivated tabs will not be rendered, and will therefore not be submitted and will not be
125 * available to either {@link Ext.form.BasicForm#getValues getValues} or
126 * {@link Ext.form.BasicForm#setValues setValues}.</p>
128 deferredRender : true,
130 * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
134 * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
138 * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
139 * tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to
140 * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
144 * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
145 * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
147 enableTabScroll : false,
149 * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
150 * (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width). Only
151 * applies when <tt>{@link #enableTabScroll} = true</tt>.
155 * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
156 * continuously pressed (defaults to <tt>400</tt>).
158 scrollRepeatInterval : 400,
160 * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
161 * to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>.
163 scrollDuration : 0.35,
165 * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
166 * to <tt>true</tt>). Only applies when <tt>{@link #enableTabScroll} = true</tt>.
170 * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
171 * The only other supported value is <tt>'bottom'</tt>. <b>Note</b>: tab scrolling is only supported for
172 * <tt>tabPosition: 'top'</tt>.
176 * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
178 baseCls : 'x-tab-panel',
180 * @cfg {Boolean} autoTabs
181 * <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted
182 * to tabs and added to this panel (defaults to <tt>false</tt>). Note that the query will be executed within
183 * the scope of the container element only (so that multiple tab panels from markup can be supported via this
185 * <p>This method is only possible when the markup is structured correctly as a container with nested divs
186 * containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content
187 * from other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
188 * <p>There are a couple of things to note when using this method:<ul>
189 * <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's
190 * {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt>
191 * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
193 * <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each
194 * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
195 * until each tab is activated and will be visible outside the TabPanel.</li>
196 * </ul>Example usage:</p>
198 var tabs = new Ext.TabPanel({
201 deferredRender: false,
205 // This markup will be converted to a TabPanel from the code above
206 <div id="my-tabs">
207 <div class="x-tab" title="Tab 1">A simple tab</div>
208 <div class="x-tab" title="Tab 2">Another one</div>
214 * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
215 * <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>). This can be any valid selector
216 * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
217 * tab panel only (so that multiple tab panels from markup can be supported on a page).
219 autoTabSelector : 'div.x-tab',
221 * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
222 * activated on render (defaults to undefined).
224 activeTab : undefined,
226 * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
227 * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
228 * with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
232 * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
233 * (defaults to <tt>false</tt>).
237 * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
238 * scrolling (defaults to <tt>20</tt>).
243 * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
244 * It does not generally need to be changed, but can be if external code also uses an id scheme that can
245 * potentially clash with this one.
250 itemCls : 'x-tab-item',
252 // private config overrides
254 headerAsText : false,
259 initComponent : function(){
261 Ext.TabPanel.superclass.initComponent.call(this);
264 * @event beforetabchange
265 * Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change.
266 * @param {TabPanel} this
267 * @param {Panel} newTab The tab being activated
268 * @param {Panel} currentTab The current active tab
273 * Fires after the active tab has changed.
274 * @param {TabPanel} this
275 * @param {Panel} tab The new active tab
280 * Relays the contextmenu event from a tab selector element in the tab strip.
281 * @param {TabPanel} this
282 * @param {Panel} tab The target tab
283 * @param {EventObject} e
288 * @cfg {Object} layoutConfig
289 * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
290 * <code>layoutConfig</code> may be used to configure this layout manager.
291 * <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code>
292 * configured on the TabPanel will be applied as configs to the layout manager.
294 this.setLayout(new Ext.layout.CardLayout(Ext.apply({
295 layoutOnCardChange: this.layoutOnTabChange,
296 deferredRender: this.deferredRender
297 }, this.layoutConfig)));
299 if(this.tabPosition == 'top'){
300 this.elements += ',header';
301 this.stripTarget = 'header';
303 this.elements += ',footer';
304 this.stripTarget = 'footer';
307 this.stack = Ext.TabPanel.AccessStack();
313 onRender : function(ct, position){
314 Ext.TabPanel.superclass.onRender.call(this, ct, position);
317 var pos = this.tabPosition == 'top' ? 'header' : 'footer';
318 this[pos].addClass('x-tab-panel-'+pos+'-plain');
321 var st = this[this.stripTarget];
323 this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
324 tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
326 var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
327 st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
328 this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
330 // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
331 this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: ' '}]});
332 this.strip.createChild({cls:'x-clear'});
334 this.body.addClass('x-tab-panel-body-'+this.tabPosition);
337 * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
338 * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
339 * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
340 * <p>The main element created should be a <tt><li></tt> element. In order for a click event on
341 * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
342 * native <tt>{@link #getTemplateArgs}</tt>.</p>
343 * <p>The child element which contains the title text must be marked by the CSS class
344 * <tt>x-tab-strip-inner</tt>.</p>
345 * <p>To enable closability, the created element should contain an element marked by the CSS class
346 * <tt>x-tab-strip-close</tt>.</p>
347 * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
348 * style rules to create the desired appearance.</p>
349 * Below is an example of how to create customized tab selector items:<pre><code>
351 renderTo: document.body,
354 enableTabScroll: true,
357 defaults: {autoScroll:true},
358 itemTpl: new Ext.XTemplate(
359 '<li class="{cls}" id="{id}" style="overflow:hidden">',
360 '<tpl if="closable">',
361 '<a class="x-tab-strip-close"></a>',
363 '<a class="x-tab-right" href="#" style="padding-left:6px">',
364 '<em class="x-tab-left">',
365 '<span class="x-tab-strip-inner">',
366 '<img src="{src}" style="float:left;margin:3px 3px 0 0">',
367 '<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>',
373 getTemplateArgs: function(item) {
374 // Call the native method to collect the base data. Like the ID!
375 var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
377 // Add stuff used in our template
378 return Ext.apply(result, {
379 closable: item.closable,
381 extra: item.extraText || ''
386 iconSrc: '../shared/icons/fam/grid.png',
391 iconSrc: '../shared/icons/fam/grid.png',
393 extraText: 'Extra stuff in the tab button'
399 var tt = new Ext.Template(
400 '<li class="{cls}" id="{id}"><a class="x-tab-strip-close"></a>',
401 '<a class="x-tab-right" href="#"><em class="x-tab-left">',
402 '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
405 tt.disableFormats = true;
407 Ext.TabPanel.prototype.itemTpl = tt;
410 this.items.each(this.initTab, this);
414 afterRender : function(){
415 Ext.TabPanel.superclass.afterRender.call(this);
417 this.readTabs(false);
419 if(this.activeTab !== undefined){
420 var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
421 delete this.activeTab;
422 this.setActiveTab(item);
427 initEvents : function(){
428 Ext.TabPanel.superclass.initEvents.call(this);
429 this.mon(this.strip, {
431 mousedown: this.onStripMouseDown,
432 contextmenu: this.onStripContextMenu
434 if(this.enableTabScroll){
435 this.mon(this.strip, 'mousewheel', this.onWheel, this);
440 findTargets : function(e){
442 var itemEl = e.getTarget('li', this.strip);
444 item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
454 close : e.getTarget('.x-tab-strip-close', this.strip),
461 onStripMouseDown : function(e){
466 var t = this.findTargets(e);
468 if (t.item.fireEvent('beforeclose', t.item) !== false) {
469 t.item.fireEvent('close', t.item);
474 if(t.item && t.item != this.activeTab){
475 this.setActiveTab(t.item);
480 onStripContextMenu : function(e){
482 var t = this.findTargets(e);
484 this.fireEvent('contextmenu', this, t.item, e);
489 * True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the
490 * <tt>{@link #autoTabSelector}</tt>
491 * @param {Boolean} removeExisting True to remove existing tabs
493 readTabs : function(removeExisting){
494 if(removeExisting === true){
495 this.items.each(function(item){
499 var tabs = this.el.query(this.autoTabSelector);
500 for(var i = 0, len = tabs.length; i < len; i++){
502 title = tab.getAttribute('title');
503 tab.removeAttribute('title');
512 initTab : function(item, index){
513 var before = this.strip.dom.childNodes[index],
514 p = this.getTemplateArgs(item),
516 this.itemTpl.insertBefore(before, p) :
517 this.itemTpl.append(this.strip, p),
518 cls = 'x-tab-strip-over',
521 tabEl.hover(function(){
526 tabEl.removeClass(cls);
530 tabEl.child('span.x-tab-strip-text', true).qtip = item.tabTip;
534 // Route *keyboard triggered* click events to the tab strip mouse handler.
535 tabEl.select('a').on('click', function(e){
537 this.onStripMouseDown(e);
539 }, this, {preventDefault: true});
543 disable: this.onItemDisabled,
544 enable: this.onItemEnabled,
545 titlechange: this.onItemTitleChanged,
546 iconchange: this.onItemIconChanged,
547 beforeshow: this.onBeforeShowItem
554 * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
555 * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
556 * to create a formatted, clickable tab selector element. The properties which must be returned
557 * are:</p><div class="mdetail-params"><ul>
558 * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
559 * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
560 * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
561 * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
563 * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
564 * @return {Object} An object hash containing the properties required to render the selector element.
566 getTemplateArgs : function(item) {
567 var cls = item.closable ? 'x-tab-strip-closable' : '';
569 cls += ' x-item-disabled';
572 cls += ' x-tab-with-icon';
575 cls += ' ' + item.tabCls;
579 id: this.id + this.idDelimiter + item.getItemId(),
582 iconCls: item.iconCls || ''
588 Ext.TabPanel.superclass.onAdd.call(this, c);
590 var items = this.items;
591 this.initTab(c, items.indexOf(c));
592 if(items.getCount() == 1){
595 this.delegateUpdates();
600 onBeforeAdd : function(item){
601 var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
603 this.setActiveTab(item);
606 Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
607 var es = item.elements;
608 item.elements = es ? es.replace(',header', '') : es;
609 item.border = (item.border === true);
613 onRemove : function(c){
614 var te = Ext.get(c.tabEl);
615 // check if the tabEl exists, it won't if the tab isn't rendered
617 te.select('a').removeAllListeners();
620 Ext.TabPanel.superclass.onRemove.call(this, c);
621 this.stack.remove(c);
623 c.un('disable', this.onItemDisabled, this);
624 c.un('enable', this.onItemEnabled, this);
625 c.un('titlechange', this.onItemTitleChanged, this);
626 c.un('iconchange', this.onItemIconChanged, this);
627 c.un('beforeshow', this.onBeforeShowItem, this);
628 if(c == this.activeTab){
629 var next = this.stack.next();
631 this.setActiveTab(next);
632 }else if(this.items.getCount() > 0){
633 this.setActiveTab(0);
635 this.setActiveTab(null);
638 if(!this.destroying){
639 this.delegateUpdates();
644 onBeforeShowItem : function(item){
645 if(item != this.activeTab){
646 this.setActiveTab(item);
652 onItemDisabled : function(item){
653 var el = this.getTabEl(item);
655 Ext.fly(el).addClass('x-item-disabled');
657 this.stack.remove(item);
661 onItemEnabled : function(item){
662 var el = this.getTabEl(item);
664 Ext.fly(el).removeClass('x-item-disabled');
669 onItemTitleChanged : function(item){
670 var el = this.getTabEl(item);
672 Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
677 onItemIconChanged : function(item, iconCls, oldCls){
678 var el = this.getTabEl(item);
681 el.child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
682 el[Ext.isEmpty(iconCls) ? 'removeClass' : 'addClass']('x-tab-with-icon');
687 * Gets the DOM element for the tab strip item which activates the child panel with the specified
688 * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
689 * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
690 * @return {HTMLElement} The DOM node
692 getTabEl : function(item){
693 var c = this.getComponent(item);
694 return c ? c.tabEl : null;
698 onResize : function(){
699 Ext.TabPanel.superclass.onResize.apply(this, arguments);
700 this.delegateUpdates();
704 * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
706 beginUpdate : function(){
707 this.suspendUpdates = true;
711 * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
713 endUpdate : function(){
714 this.suspendUpdates = false;
715 this.delegateUpdates();
719 * Hides the tab strip item for the passed tab
720 * @param {Number/String/Panel} item The tab index, id or item
722 hideTabStripItem : function(item){
723 item = this.getComponent(item);
724 var el = this.getTabEl(item);
726 el.style.display = 'none';
727 this.delegateUpdates();
729 this.stack.remove(item);
733 * Unhides the tab strip item for the passed tab
734 * @param {Number/String/Panel} item The tab index, id or item
736 unhideTabStripItem : function(item){
737 item = this.getComponent(item);
738 var el = this.getTabEl(item);
740 el.style.display = '';
741 this.delegateUpdates();
746 delegateUpdates : function(){
747 if(this.suspendUpdates){
750 if(this.resizeTabs && this.rendered){
753 if(this.enableTabScroll && this.rendered){
754 this.autoScrollTabs();
759 autoSizeTabs : function(){
760 var count = this.items.length,
761 ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
762 ow = this[ce].dom.offsetWidth,
763 aw = this[ce].dom.clientWidth;
765 if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
769 var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
770 this.lastTabWidth = each;
771 var lis = this.strip.query("li:not([className^=x-tab-edge])");
772 for(var i = 0, len = lis.length; i < len; i++) {
774 inner = Ext.fly(li).child('.x-tab-strip-inner', true),
776 iw = inner.offsetWidth;
777 inner.style.width = (each - (tw-iw)) + 'px';
782 adjustBodyWidth : function(w){
784 this.header.setWidth(w);
787 this.footer.setWidth(w);
793 * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
794 * can <tt>return false</tt> to cancel the tab change.
795 * @param {String/Number} item
796 * The id or tab Panel to activate. This parameter may be any of the following:
797 * <div><ul class="mdetail-params">
798 * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
799 * or <code>{@link Ext.Component#id id}</code> of the child component </li>
800 * <li>a <b><tt>Number</tt></b> : representing the position of the child component
801 * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
803 * <p>For additional information see {@link Ext.util.MixedCollection#get}.
805 setActiveTab : function(item){
806 item = this.getComponent(item);
807 if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
811 this.activeTab = item;
814 if(this.activeTab != item){
816 var oldEl = this.getTabEl(this.activeTab);
818 Ext.fly(oldEl).removeClass('x-tab-strip-active');
822 var el = this.getTabEl(item);
823 Ext.fly(el).addClass('x-tab-strip-active');
824 this.activeTab = item;
825 this.stack.add(item);
827 this.layout.setActiveItem(item);
829 this.scrollToTab(item, this.animScroll);
832 this.fireEvent('tabchange', this, item);
837 * Returns the Component which is the currently active tab. <b>Note that before the TabPanel
838 * first activates a child Component, this method will return whatever was configured in the
839 * {@link #activeTab} config option.</b>
840 * @return {BoxComponent} The currently active child Component if one <i>is</i> active, or the {@link #activeTab} config value.
842 getActiveTab : function(){
843 return this.activeTab || null;
847 * Gets the specified tab by id.
848 * @param {String} id The tab id
849 * @return {Panel} The tab
851 getItem : function(item){
852 return this.getComponent(item);
856 autoScrollTabs : function(){
857 this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
858 var count = this.items.length,
859 ow = this.pos.dom.offsetWidth,
860 tw = this.pos.dom.clientWidth,
861 wrap = this.stripWrap,
864 pos = this.getScrollPos(),
865 l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
867 if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
874 this.scrolling = false;
875 this.pos.removeClass('x-tab-scrolling');
876 this.scrollLeft.hide();
877 this.scrollRight.hide();
878 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
879 if(Ext.isAir || Ext.isWebKit){
880 wd.style.marginLeft = '';
881 wd.style.marginRight = '';
886 this.pos.addClass('x-tab-scrolling');
887 // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
888 if(Ext.isAir || Ext.isWebKit){
889 wd.style.marginLeft = '18px';
890 wd.style.marginRight = '18px';
893 tw -= wrap.getMargins('lr');
894 wrap.setWidth(tw > 20 ? tw : 20);
896 if(!this.scrollLeft){
897 this.createScrollers();
899 this.scrollLeft.show();
900 this.scrollRight.show();
903 this.scrolling = true;
904 if(pos > (l-tw)){ // ensure it stays within bounds
905 wd.scrollLeft = l-tw;
906 }else{ // otherwise, make sure the active tab is still visible
907 this.scrollToTab(this.activeTab, false);
909 this.updateScrollButtons();
914 createScrollers : function(){
915 this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
916 var h = this.stripWrap.dom.offsetHeight;
919 var sl = this.pos.insertFirst({
920 cls:'x-tab-scroller-left'
923 sl.addClassOnOver('x-tab-scroller-left-over');
924 this.leftRepeater = new Ext.util.ClickRepeater(sl, {
925 interval : this.scrollRepeatInterval,
926 handler: this.onScrollLeft,
929 this.scrollLeft = sl;
932 var sr = this.pos.insertFirst({
933 cls:'x-tab-scroller-right'
936 sr.addClassOnOver('x-tab-scroller-right-over');
937 this.rightRepeater = new Ext.util.ClickRepeater(sr, {
938 interval : this.scrollRepeatInterval,
939 handler: this.onScrollRight,
942 this.scrollRight = sr;
946 getScrollWidth : function(){
947 return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
951 getScrollPos : function(){
952 return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
956 getScrollArea : function(){
957 return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
961 getScrollAnim : function(){
962 return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
966 getScrollIncrement : function(){
967 return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
971 * Scrolls to a particular tab if tab scrolling is enabled
972 * @param {Panel} item The item to scroll to
973 * @param {Boolean} animate True to enable animations
976 scrollToTab : function(item, animate){
980 var el = this.getTabEl(item),
981 pos = this.getScrollPos(),
982 area = this.getScrollArea(),
983 left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos,
984 right = left + el.offsetWidth;
986 this.scrollTo(left, animate);
987 }else if(right > (pos + area)){
988 this.scrollTo(right - area, animate);
993 scrollTo : function(pos, animate){
994 this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
996 this.updateScrollButtons();
1000 onWheel : function(e){
1001 var d = e.getWheelDelta()*this.wheelIncrement*-1;
1004 var pos = this.getScrollPos(),
1006 sw = this.getScrollWidth()-this.getScrollArea();
1008 var s = Math.max(0, Math.min(sw, newpos));
1010 this.scrollTo(s, false);
1015 onScrollRight : function(){
1016 var sw = this.getScrollWidth()-this.getScrollArea(),
1017 pos = this.getScrollPos(),
1018 s = Math.min(sw, pos + this.getScrollIncrement());
1020 this.scrollTo(s, this.animScroll);
1025 onScrollLeft : function(){
1026 var pos = this.getScrollPos(),
1027 s = Math.max(0, pos - this.getScrollIncrement());
1029 this.scrollTo(s, this.animScroll);
1034 updateScrollButtons : function(){
1035 var pos = this.getScrollPos();
1036 this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
1037 this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
1041 beforeDestroy : function() {
1042 Ext.destroy(this.leftRepeater, this.rightRepeater);
1043 this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap');
1044 this.activeTab = null;
1045 Ext.TabPanel.superclass.beforeDestroy.apply(this);
1049 * @cfg {Boolean} collapsible
1053 * @cfg {String} header
1057 * @cfg {Boolean} headerAsText
1069 * @cfg {Array} tools
1073 * @cfg {Array} toolTemplate
1077 * @cfg {Boolean} hideCollapseTool
1081 * @cfg {Boolean} titleCollapse
1085 * @cfg {Boolean} collapsed
1089 * @cfg {String} layout
1093 * @cfg {Boolean} preventBodyReset
1097 Ext.reg('tabpanel', Ext.TabPanel);
1100 * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
1101 * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
1102 * @param {String/Panel} tab The id or tab Panel to activate
1105 Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1107 // private utility class used by TabPanel
1108 Ext.TabPanel.AccessStack = function(){
1111 add : function(item){
1113 if(items.length > 10){
1118 remove : function(item){
1120 for(var i = 0, len = items.length; i < len; i++) {
1121 if(items[i] != item){