2
* Ext JS Library 3.0 RC2
3
* Copyright(c) 2006-2009, Ext JS, LLC.
6
* http://extjs.com/license
11
* <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
12
* for layout purposes, but also have special support for containing child Components
13
* (<tt>{@link Ext.Container#items items}</tt>) that are managed using a
14
* {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.</p>
16
* <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component
17
* and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable
18
* re-use of a tab, configure the TabPanel with <b><code>{@link #autoDestroy autoDestroy: false}</code></b>.
20
* <p><b><u>TabPanel header/footer elements</u></b></p>
21
* <p>TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
22
* (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
23
* This means that a TabPanel will not display any configured title, and will not display any
24
* configured header {@link Ext.Panel#tools tools}.</p>
25
* <p>To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
26
* <b><tt>{@link Ext.Container#layout layout:'fit'}</tt></b>.</p>
28
* <p><b><u>Tab Events</u></b></p>
29
* <p>There is no actual tab class — each tab is simply a {@link Ext.BoxComponent Component}
30
* such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component
31
* can fire additional events that only exist for tabs and are not available from other Components.
32
* These events are:</p>
33
* <div><ul class="mdetail-params">
34
* <li><tt><b>{@link Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes
35
* the active tab.</li>
36
* <li><tt><b>{@link Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that
37
* was the active tab becomes deactivated.</li>
39
* <p><b><u>Creating TabPanels from Code</u></b></p>
40
* <p>TabPanels can be created and rendered completely in code, as in this example:</p>
42
var tabs = new Ext.TabPanel({
43
renderTo: Ext.getBody(),
54
* <p><b><u>Creating TabPanels from Existing Markup</u></b></p>
55
* <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p>
56
* <div><ul class="mdetail-params">
58
* <li>Pre-Structured Markup</li>
59
* <div class="sub-desc">
60
* <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely
61
* from existing markup (See the {@link #autoTabs} example).</p>
64
* <li>Un-Structured Markup</li>
65
* <div class="sub-desc">
66
* <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
67
* which elements should be the container and the tabs. Using this method tab content can be pulled from different
68
* elements within the page by id regardless of page structure. For example:</p>
70
var tabs = new Ext.TabPanel({
74
{contentEl:'tab1', title:'Tab 1'},
75
{contentEl:'tab2', title:'Tab 2'}
79
// Note that the tabs do not have to be nested within the container (although they can be)
80
<div id="my-tabs"></div>
81
<div id="tab1" class="x-hide-display">A simple tab</div>
82
<div id="tab2" class="x-hide-display">Another one</div>
84
* Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
85
* deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt>
86
* to render all content tabs on page load.
93
* @param {Object} config The configuration options
96
Ext.TabPanel = Ext.extend(Ext.Panel, {
98
* @cfg {Boolean} layoutOnTabChange
99
* Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
100
* See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
103
* @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
104
* class name applied to the tab strip item representing the child Component, allowing special
105
* styling to be applied.
108
* @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
109
* browser resize (defaults to true).
111
monitorResize : true,
113
* @cfg {Boolean} deferredRender
114
* <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt>
115
* to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
116
* <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout}
117
* is rendered. If there is a significant amount of content or a lot of heavy controls being
118
* rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
119
* improve performance.</p>
120
* <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
121
* TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
122
* configuration value.</p>
123
* <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
124
* within an unactivated tab will not be available. For example, this means that if the TabPanel
125
* is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
126
* unactivated tabs will not be rendered, and will therefore not be submitted and will not be
127
* available to either {@link Ext.form.BasicForm#getValues getValues} or
128
* {@link Ext.form.BasicForm#setValues setValues}.</p>
130
deferredRender : true,
132
* @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
136
* @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
140
* @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
141
* tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to
142
* be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
146
* @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
147
* overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
149
enableTabScroll : false,
151
* @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
152
* (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width). Only
153
* applies when <tt>{@link #enableTabScroll} = true</tt>.
157
* @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
158
* continuously pressed (defaults to <tt>400</tt>).
160
scrollRepeatInterval : 400,
162
* @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
163
* to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>.
165
scrollDuration : .35,
167
* @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
168
* to <tt>true</tt>). Only applies when <tt>{@link #enableTabScroll} = true</tt>.
172
* @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
173
* The only other supported value is <tt>'bottom'</tt>. <b>Note</b>: tab scrolling is only supported for
174
* <tt>tabPosition: 'top'</tt>.
178
* @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
180
baseCls : 'x-tab-panel',
182
* @cfg {Boolean} autoTabs
183
* <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted
184
* to tabs and added to this panel (defaults to <tt>false</tt>). Note that the query will be executed within
185
* the scope of the container element only (so that multiple tab panels from markup can be supported via this
187
* <p>This method is only possible when the markup is structured correctly as a container with nested divs
188
* containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content
189
* from other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
190
* <p>There are a couple of things to note when using this method:<ul>
191
* <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's
192
* {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt>
193
* as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
195
* <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each
196
* tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
197
* until each tab is activated and will be visible outside the TabPanel.</li>
198
* </ul>Example usage:</p>
200
var tabs = new Ext.TabPanel({
203
deferredRender: false,
207
// This markup will be converted to a TabPanel from the code above
208
<div id="my-tabs">
209
<div class="x-tab" title="Tab 1">A simple tab</div>
210
<div class="x-tab" title="Tab 2">Another one</div>
216
* @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
217
* <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>). This can be any valid selector
218
* supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
219
* tab panel only (so that multiple tab panels from markup can be supported on a page).
221
autoTabSelector : 'div.x-tab',
223
* @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
224
* activated on render (defaults to none).
228
* @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
229
* tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
230
* with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
234
* @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
235
* (defaults to <tt>false</tt>).
239
* @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
240
* scrolling (defaults to <tt>20</tt>).
245
* This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
246
* It does not generally need to be changed, but can be if external code also uses an id scheme that can
247
* potentially clash with this one.
252
itemCls : 'x-tab-item',
254
// private config overrides
256
headerAsText : false,
261
initComponent : function(){
263
Ext.TabPanel.superclass.initComponent.call(this);
266
* @event beforetabchange
267
* Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change.
268
* @param {TabPanel} this
269
* @param {Panel} newTab The tab being activated
270
* @param {Panel} currentTab The current active tab
275
* Fires after the active tab has changed.
276
* @param {TabPanel} this
277
* @param {Panel} tab The new active tab
282
* Relays the contextmenu event from a tab selector element in the tab strip.
283
* @param {TabPanel} this
284
* @param {Panel} tab The target tab
285
* @param {EventObject} e
290
* @cfg {Object} layoutConfig
291
* TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
292
* <code>layoutConfig</code> may be used to configure this layout manager.
293
* <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code>
294
* configured on the TabPanel will be applied as configs to the layout manager.
296
this.setLayout(new Ext.layout.CardLayout(Ext.apply({
297
layoutOnCardChange: this.layoutOnTabChange,
298
deferredRender: this.deferredRender
299
}, this.layoutConfig)));
301
if(this.tabPosition == 'top'){
302
this.elements += ',header';
303
this.stripTarget = 'header';
305
this.elements += ',footer';
306
this.stripTarget = 'footer';
309
this.stack = Ext.TabPanel.AccessStack();
315
onRender : function(ct, position){
316
Ext.TabPanel.superclass.onRender.call(this, ct, position);
319
var pos = this.tabPosition == 'top' ? 'header' : 'footer';
320
this[pos].addClass('x-tab-panel-'+pos+'-plain');
323
var st = this[this.stripTarget];
325
this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
326
tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
328
var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
329
this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
330
this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
332
this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
333
this.strip.createChild({cls:'x-clear'});
335
this.body.addClass('x-tab-panel-body-'+this.tabPosition);
338
* @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
339
* {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
340
* <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
341
* <p>The main element created should be a <tt><li></tt> element. In order for a click event on
342
* a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
343
* native <tt>{@link #getTemplateArgs}</tt>.</p>
344
* <p>The child element which contains the title text must be marked by the CSS class
345
* <tt>x-tab-strip-inner</tt>.</p>
346
* <p>To enable closability, the created element should contain an element marked by the CSS class
347
* <tt>x-tab-strip-close</tt>.</p>
348
* <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
349
* style rules to create the desired appearance.</p>
350
* Below is an example of how to create customized tab selector items:<code><pre>
352
renderTo: document.body,
355
enableTabScroll: true,
358
defaults: {autoScroll:true},
359
itemTpl: new Ext.XTemplate(
360
'<li class="{cls}" id="{id}" style="overflow:hidden">',
361
'<tpl if="closable">',
362
'<a class="x-tab-strip-close" onclick="return false;"></a>',
364
'<a class="x-tab-right" href="#" onclick="return false;" style="padding-left:6px">',
365
'<em class="x-tab-left">',
366
'<span class="x-tab-strip-inner">',
367
'<img src="{src}" style="float:left;margin:3px 3px 0 0">',
368
'<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>',
374
getTemplateArgs: function(item) {
375
// Call the native method to collect the base data. Like the ID!
376
var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
378
// Add stuff used in our template
379
return Ext.apply(result, {
380
closable: item.closable,
382
extra: item.extraText || ''
387
iconSrc: '../shared/icons/fam/grid.png',
392
iconSrc: '../shared/icons/fam/grid.png',
394
extraText: 'Extra stuff in the tab button'
400
var tt = new Ext.Template(
401
'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
402
'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
403
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
406
tt.disableFormats = true;
408
Ext.TabPanel.prototype.itemTpl = tt;
411
this.items.each(this.initTab, this);
415
afterRender : function(){
416
Ext.TabPanel.superclass.afterRender.call(this);
418
this.readTabs(false);
420
if(this.activeTab !== undefined){
421
var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
422
delete this.activeTab;
423
this.setActiveTab(item);
428
initEvents : function(){
429
Ext.TabPanel.superclass.initEvents.call(this);
430
this.on('add', this.onAdd, this, {target: this});
431
this.on('remove', this.onRemove, this, {target: this});
433
this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
434
this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
435
if(this.enableTabScroll){
436
this.mon(this.strip, 'mousewheel', this.onWheel, this);
441
findTargets : function(e){
443
var itemEl = e.getTarget('li', this.strip);
445
item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
455
close : e.getTarget('.x-tab-strip-close', this.strip),
462
onStripMouseDown : function(e){
467
var t = this.findTargets(e);
469
if (t.item.fireEvent('beforeclose', t.item) !== false) {
470
t.item.fireEvent('close', t.item);
475
if(t.item && t.item != this.activeTab){
476
this.setActiveTab(t.item);
481
onStripContextMenu : function(e){
483
var t = this.findTargets(e);
485
this.fireEvent('contextmenu', this, t.item, e);
490
* True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the
491
* <tt>{@link #autoTabSelector}</tt>
492
* @param {Boolean} removeExisting True to remove existing tabs
494
readTabs : function(removeExisting){
495
if(removeExisting === true){
496
this.items.each(function(item){
500
var tabs = this.el.query(this.autoTabSelector);
501
for(var i = 0, len = tabs.length; i < len; i++){
503
var title = tab.getAttribute('title');
504
tab.removeAttribute('title');
513
initTab : function(item, index){
514
var before = this.strip.dom.childNodes[index];
515
var p = this.getTemplateArgs(item);
517
this.itemTpl.insertBefore(before, p) :
518
this.itemTpl.append(this.strip, p);
520
Ext.fly(el).addClassOnOver('x-tab-strip-over');
523
Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
527
item.on('disable', this.onItemDisabled, this);
528
item.on('enable', this.onItemEnabled, this);
529
item.on('titlechange', this.onItemTitleChanged, this);
530
item.on('iconchange', this.onItemIconChanged, this);
531
item.on('beforeshow', this.onBeforeShowItem, this);
535
* <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
536
* <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
537
* to create a formatted, clickable tab selector element. The properties which must be returned
538
* are:</p><div class="mdetail-params"><ul>
539
* <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
540
* <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
541
* <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
542
* <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
544
* @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
545
* @return {Object} An object hash containing the properties required to render the selector element.
547
getTemplateArgs : function(item) {
548
var cls = item.closable ? 'x-tab-strip-closable' : '';
550
cls += ' x-item-disabled';
553
cls += ' x-tab-with-icon';
556
cls += ' ' + item.tabCls;
560
id: this.id + this.idDelimiter + item.getItemId(),
563
iconCls: item.iconCls || ''
568
onAdd : function(tp, item, index){
569
this.initTab(item, index);
570
if(this.items.getCount() == 1){
573
this.delegateUpdates();
577
onBeforeAdd : function(item){
578
var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
580
this.setActiveTab(item);
583
Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
584
var es = item.elements;
585
item.elements = es ? es.replace(',header', '') : es;
586
item.border = (item.border === true);
590
onRemove : function(tp, item){
591
Ext.destroy(Ext.get(this.getTabEl(item)));
592
this.stack.remove(item);
593
item.un('disable', this.onItemDisabled, this);
594
item.un('enable', this.onItemEnabled, this);
595
item.un('titlechange', this.onItemTitleChanged, this);
596
item.un('iconchange', this.onItemIconChanged, this);
597
item.un('beforeshow', this.onBeforeShowItem, this);
598
if(item == this.activeTab){
599
var next = this.stack.next();
601
this.setActiveTab(next);
602
}else if(this.items.getCount() > 0){
603
this.setActiveTab(0);
605
this.activeTab = null;
608
this.delegateUpdates();
612
onBeforeShowItem : function(item){
613
if(item != this.activeTab){
614
this.setActiveTab(item);
620
onItemDisabled : function(item){
621
var el = this.getTabEl(item);
623
Ext.fly(el).addClass('x-item-disabled');
625
this.stack.remove(item);
629
onItemEnabled : function(item){
630
var el = this.getTabEl(item);
632
Ext.fly(el).removeClass('x-item-disabled');
637
onItemTitleChanged : function(item){
638
var el = this.getTabEl(item);
640
Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
645
onItemIconChanged : function(item, iconCls, oldCls){
646
var el = this.getTabEl(item);
648
Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
653
* Gets the DOM element for the tab strip item which activates the child panel with the specified
654
* ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
655
* @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
656
* @return {HTMLElement} The DOM node
658
getTabEl : function(item){
659
var itemId = (Ext.isObject(item) ? item : this.getComponent(item)).getItemId();
660
return document.getElementById(this.id+this.idDelimiter+itemId);
664
onResize : function(){
665
Ext.TabPanel.superclass.onResize.apply(this, arguments);
666
this.delegateUpdates();
670
* Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
672
beginUpdate : function(){
673
this.suspendUpdates = true;
677
* Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
679
endUpdate : function(){
680
this.suspendUpdates = false;
681
this.delegateUpdates();
685
* Hides the tab strip item for the passed tab
686
* @param {Number/String/Panel} item The tab index, id or item
688
hideTabStripItem : function(item){
689
item = this.getComponent(item);
690
var el = this.getTabEl(item);
692
el.style.display = 'none';
693
this.delegateUpdates();
695
this.stack.remove(item);
699
* Unhides the tab strip item for the passed tab
700
* @param {Number/String/Panel} item The tab index, id or item
702
unhideTabStripItem : function(item){
703
item = this.getComponent(item);
704
var el = this.getTabEl(item);
706
el.style.display = '';
707
this.delegateUpdates();
712
delegateUpdates : function(){
713
if(this.suspendUpdates){
716
if(this.resizeTabs && this.rendered){
719
if(this.enableTabScroll && this.rendered){
720
this.autoScrollTabs();
725
autoSizeTabs : function(){
726
var count = this.items.length;
727
var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
728
var ow = this[ce].dom.offsetWidth;
729
var aw = this[ce].dom.clientWidth;
731
if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
735
var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
736
this.lastTabWidth = each;
737
var lis = this.strip.query("li:not([className^=x-tab-edge])");
738
for(var i = 0, len = lis.length; i < len; i++) {
740
var inner = Ext.fly(li).child('.x-tab-strip-inner', true);
741
var tw = li.offsetWidth;
742
var iw = inner.offsetWidth;
743
inner.style.width = (each - (tw-iw)) + 'px';
748
adjustBodyWidth : function(w){
750
this.header.setWidth(w);
753
this.footer.setWidth(w);
759
* Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
760
* can <tt>return false</tt> to cancel the tab change.
761
* @param {String/Panel} tab The id or tab Panel to activate
763
setActiveTab : function(item){
764
item = this.getComponent(item);
765
if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
769
this.activeTab = item;
772
if(this.activeTab != item){
774
var oldEl = this.getTabEl(this.activeTab);
776
Ext.fly(oldEl).removeClass('x-tab-strip-active');
778
this.activeTab.fireEvent('deactivate', this.activeTab);
780
var el = this.getTabEl(item);
781
Ext.fly(el).addClass('x-tab-strip-active');
782
this.activeTab = item;
783
this.stack.add(item);
785
this.layout.setActiveItem(item);
787
this.scrollToTab(item, this.animScroll);
790
item.fireEvent('activate', item);
791
this.fireEvent('tabchange', this, item);
796
* Gets the currently active tab.
797
* @return {Panel} The active tab
799
getActiveTab : function(){
800
return this.activeTab || null;
804
* Gets the specified tab by id.
805
* @param {String} id The tab id
806
* @return {Panel} The tab
808
getItem : function(item){
809
return this.getComponent(item);
813
autoScrollTabs : function(){
814
this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
815
var count = this.items.length;
816
var ow = this.pos.dom.offsetWidth;
817
var tw = this.pos.dom.clientWidth;
819
var wrap = this.stripWrap;
821
var cw = wd.offsetWidth;
822
var pos = this.getScrollPos();
823
var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
825
if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
832
this.scrolling = false;
833
this.pos.removeClass('x-tab-scrolling');
834
this.scrollLeft.hide();
835
this.scrollRight.hide();
836
// See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
837
if(Ext.isAir || Ext.isWebKit){
838
wd.style.marginLeft = '';
839
wd.style.marginRight = '';
844
this.pos.addClass('x-tab-scrolling');
845
// See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
846
if(Ext.isAir || Ext.isWebKit){
847
wd.style.marginLeft = '18px';
848
wd.style.marginRight = '18px';
851
tw -= wrap.getMargins('lr');
852
wrap.setWidth(tw > 20 ? tw : 20);
854
if(!this.scrollLeft){
855
this.createScrollers();
857
this.scrollLeft.show();
858
this.scrollRight.show();
861
this.scrolling = true;
862
if(pos > (l-tw)){ // ensure it stays within bounds
863
wd.scrollLeft = l-tw;
864
}else{ // otherwise, make sure the active tab is still visible
865
this.scrollToTab(this.activeTab, false);
867
this.updateScrollButtons();
872
createScrollers : function(){
873
this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
874
var h = this.stripWrap.dom.offsetHeight;
877
var sl = this.pos.insertFirst({
878
cls:'x-tab-scroller-left'
881
sl.addClassOnOver('x-tab-scroller-left-over');
882
this.leftRepeater = new Ext.util.ClickRepeater(sl, {
883
interval : this.scrollRepeatInterval,
884
handler: this.onScrollLeft,
887
this.scrollLeft = sl;
890
var sr = this.pos.insertFirst({
891
cls:'x-tab-scroller-right'
894
sr.addClassOnOver('x-tab-scroller-right-over');
895
this.rightRepeater = new Ext.util.ClickRepeater(sr, {
896
interval : this.scrollRepeatInterval,
897
handler: this.onScrollRight,
900
this.scrollRight = sr;
904
getScrollWidth : function(){
905
return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
909
getScrollPos : function(){
910
return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
914
getScrollArea : function(){
915
return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
919
getScrollAnim : function(){
920
return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
924
getScrollIncrement : function(){
925
return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
929
* Scrolls to a particular tab if tab scrolling is enabled
930
* @param {Panel} item The item to scroll to
931
* @param {Boolean} animate True to enable animations
934
scrollToTab : function(item, animate){
936
var el = this.getTabEl(item);
937
var pos = this.getScrollPos(), area = this.getScrollArea();
938
var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
939
var right = left + el.offsetWidth;
941
this.scrollTo(left, animate);
942
}else if(right > (pos + area)){
943
this.scrollTo(right - area, animate);
948
scrollTo : function(pos, animate){
949
this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
951
this.updateScrollButtons();
955
onWheel : function(e){
956
var d = e.getWheelDelta()*this.wheelIncrement*-1;
959
var pos = this.getScrollPos();
960
var newpos = pos + d;
961
var sw = this.getScrollWidth()-this.getScrollArea();
963
var s = Math.max(0, Math.min(sw, newpos));
965
this.scrollTo(s, false);
970
onScrollRight : function(){
971
var sw = this.getScrollWidth()-this.getScrollArea();
972
var pos = this.getScrollPos();
973
var s = Math.min(sw, pos + this.getScrollIncrement());
975
this.scrollTo(s, this.animScroll);
980
onScrollLeft : function(){
981
var pos = this.getScrollPos();
982
var s = Math.max(0, pos - this.getScrollIncrement());
984
this.scrollTo(s, this.animScroll);
989
updateScrollButtons : function(){
990
var pos = this.getScrollPos();
991
this.scrollLeft[pos == 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
992
this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
996
beforeDestroy : function() {
998
this.items.each(function(item){
999
if(item && item.tabEl){
1000
Ext.get(item.tabEl).removeAllListeners();
1006
this.strip.removeAllListeners();
1008
Ext.TabPanel.superclass.beforeDestroy.apply(this);
1012
* @cfg {Boolean} collapsible
1016
* @cfg {String} header
1020
* @cfg {Boolean} headerAsText
1032
* @cfg {Array} tools
1036
* @cfg {Array} toolTemplate
1040
* @cfg {Boolean} hideCollapseTool
1044
* @cfg {Boolean} titleCollapse
1048
* @cfg {Boolean} collapsed
1052
* @cfg {String} layout
1056
Ext.reg('tabpanel', Ext.TabPanel);
1059
* See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
1060
* the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
1061
* @param {String/Panel} tab The id or tab Panel to activate
1064
Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1066
// private utility class used by TabPanel
1067
Ext.TabPanel.AccessStack = function(){
1070
add : function(item){
1072
if(items.length > 10){
1077
remove : function(item){
1079
for(var i = 0, len = items.length; i < len; i++) {
1080
if(items[i] != item){
b'\\ No newline at end of file'
added
removed
webui/ecosystem/extjs/source/widgets/TabPanel.js
