source: trunk/web/addons/job_monarch/lib/extjs-30/pkgs/pkg-tabs-debug.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 39.2 KB
Line 
1/*!
2 * Ext JS Library 3.0.0
3 * Copyright(c) 2006-2009 Ext JS, LLC
4 * licensing@extjs.com
5 * http://www.extjs.com/license
6 */
7/**
8 * @class Ext.TabPanel
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>
13 *
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>.
17 *
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>
25 *
26 * <p><b><u>Tab Events</u></b></p>
27 * <p>There is no actual tab class &mdash; 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>
36 * </ul></div>
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>
39 * <pre><code>
40var tabs = new Ext.TabPanel({
41    renderTo: Ext.getBody(),
42    activeTab: 0,
43    items: [{
44        title: 'Tab 1',
45        html: 'A simple tab'
46    },{
47        title: 'Tab 2',
48        html: 'Another one'
49    }]
50});
51</code></pre>
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">
55 *
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>
60 * </div>
61 *
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>
67 * <pre><code>
68var tabs = new Ext.TabPanel({
69    renderTo: 'my-tabs',
70    activeTab: 0,
71    items:[
72        {contentEl:'tab1', title:'Tab 1'},
73        {contentEl:'tab2', title:'Tab 2'}
74    ]
75});
76
77// Note that the tabs do not have to be nested within the container (although they can be)
78&lt;div id="my-tabs">&lt;/div>
79&lt;div id="tab1" class="x-hide-display">A simple tab&lt;/div>
80&lt;div id="tab2" class="x-hide-display">Another one&lt;/div>
81</code></pre>
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.
85 * </div>
86 *
87 * </ul></div>
88 *
89 * @extends Ext.Panel
90 * @constructor
91 * @param {Object} config The configuration options
92 * @xtype tabpanel
93 */
94Ext.TabPanel = Ext.extend(Ext.Panel,  {
95    /**
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>.
99     */
100    /**
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.
104     */
105    /**
106     * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
107     * browser resize (defaults to true).
108     */
109    monitorResize : true,
110    /**
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>
127     */
128    deferredRender : true,
129    /**
130     * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
131     */
132    tabWidth : 120,
133    /**
134     * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
135     */
136    minTabWidth : 30,
137    /**
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).
141     */
142    resizeTabs : false,
143    /**
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).
146     */
147    enableTabScroll : false,
148    /**
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>.
152     */
153    scrollIncrement : 0,
154    /**
155     * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
156     * continuously pressed (defaults to <tt>400</tt>).
157     */
158    scrollRepeatInterval : 400,
159    /**
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>.
162     */
163    scrollDuration : 0.35,
164    /**
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>.
167     */
168    animScroll : true,
169    /**
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>.
173     */
174    tabPosition : 'top',
175    /**
176     * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
177     */
178    baseCls : 'x-tab-panel',
179    /**
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
184     * method).</p>
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
192     * components.</li>
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>
197     * <pre><code>
198var tabs = new Ext.TabPanel({
199    applyTo: 'my-tabs',
200    activeTab: 0,
201    deferredRender: false,
202    autoTabs: true
203});
204
205// This markup will be converted to a TabPanel from the code above
206&lt;div id="my-tabs">
207    &lt;div class="x-tab" title="Tab 1">A simple tab&lt;/div>
208    &lt;div class="x-tab" title="Tab 2">Another one&lt;/div>
209&lt;/div>
210</code></pre>
211     */
212    autoTabs : false,
213    /**
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).
218     */
219    autoTabSelector : 'div.x-tab',
220    /**
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 none).
223     */
224    activeTab : null,
225    /**
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>)
229     */
230    tabMargin : 2,
231    /**
232     * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
233     * (defaults to <tt>false</tt>).
234     */
235    plain : false,
236    /**
237     * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
238     * scrolling (defaults to <tt>20</tt>).
239     */
240    wheelIncrement : 20,
241
242    /*
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.
246     */
247    idDelimiter : '__',
248
249    // private
250    itemCls : 'x-tab-item',
251
252    // private config overrides
253    elements : 'body',
254    headerAsText : false,
255    frame : false,
256    hideBorders :true,
257
258    // private
259    initComponent : function(){
260        this.frame = false;
261        Ext.TabPanel.superclass.initComponent.call(this);
262        this.addEvents(
263            /**
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
269             */
270            'beforetabchange',
271            /**
272             * @event tabchange
273             * Fires after the active tab has changed.
274             * @param {TabPanel} this
275             * @param {Panel} tab The new active tab
276             */
277            'tabchange',
278            /**
279             * @event contextmenu
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
284             */
285            'contextmenu'
286        );
287        /**
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.
293         */
294        this.setLayout(new Ext.layout.CardLayout(Ext.apply({
295            layoutOnCardChange: this.layoutOnTabChange,
296            deferredRender: this.deferredRender
297        }, this.layoutConfig)));
298
299        if(this.tabPosition == 'top'){
300            this.elements += ',header';
301            this.stripTarget = 'header';
302        }else {
303            this.elements += ',footer';
304            this.stripTarget = 'footer';
305        }
306        if(!this.stack){
307            this.stack = Ext.TabPanel.AccessStack();
308        }
309        this.initItems();
310    },
311
312    // private
313    onRender : function(ct, position){
314        Ext.TabPanel.superclass.onRender.call(this, ct, position);
315
316        if(this.plain){
317            var pos = this.tabPosition == 'top' ? 'header' : 'footer';
318            this[pos].addClass('x-tab-panel-'+pos+'-plain');
319        }
320
321        var st = this[this.stripTarget];
322
323        this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
324            tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
325
326        var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
327        this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
328        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
329
330        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
331        this.strip.createChild({cls:'x-clear'});
332
333        this.body.addClass('x-tab-panel-body-'+this.tabPosition);
334
335        /**
336         * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
337         * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
338         * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
339         * <p>The main element created should be a <tt>&lt;li></tt> element. In order for a click event on
340         * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
341         * native <tt>{@link #getTemplateArgs}</tt>.</p>
342         * <p>The child element which contains the title text must be marked by the CSS class
343         * <tt>x-tab-strip-inner</tt>.</p>
344         * <p>To enable closability, the created element should contain an element marked by the CSS class
345         * <tt>x-tab-strip-close</tt>.</p>
346         * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
347         * style rules to create the desired appearance.</p>
348         * Below is an example of how to create customized tab selector items:<pre><code>
349new Ext.TabPanel({
350    renderTo: document.body,
351    minTabWidth: 115,
352    tabWidth: 135,
353    enableTabScroll: true,
354    width: 600,
355    height: 250,
356    defaults: {autoScroll:true},
357    itemTpl: new Ext.XTemplate(
358    '&lt;li class="{cls}" id="{id}" style="overflow:hidden">',
359         '&lt;tpl if="closable">',
360            '&lt;a class="x-tab-strip-close" onclick="return false;">&lt;/a>',
361         '&lt;/tpl>',
362         '&lt;a class="x-tab-right" href="#" onclick="return false;" style="padding-left:6px">',
363            '&lt;em class="x-tab-left">',
364                '&lt;span class="x-tab-strip-inner">',
365                    '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0">',
366                    '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}&lt;/span>',
367                '&lt;/span>',
368            '&lt;/em>',
369        '&lt;/a>',
370    '&lt;/li>'
371    ),
372    getTemplateArgs: function(item) {
373//      Call the native method to collect the base data. Like the ID!
374        var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
375
376//      Add stuff used in our template
377        return Ext.apply(result, {
378            closable: item.closable,
379            src: item.iconSrc,
380            extra: item.extraText || ''
381        });
382    },
383    items: [{
384        title: 'New Tab 1',
385        iconSrc: '../shared/icons/fam/grid.png',
386        html: 'Tab Body 1',
387        closable: true
388    }, {
389        title: 'New Tab 2',
390        iconSrc: '../shared/icons/fam/grid.png',
391        html: 'Tab Body 2',
392        extraText: 'Extra stuff in the tab button'
393    }]
394});
395</code></pre>
396         */
397        if(!this.itemTpl){
398            var tt = new Ext.Template(
399                 '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
400                 '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
401                 '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
402                 '</em></a></li>'
403            );
404            tt.disableFormats = true;
405            tt.compile();
406            Ext.TabPanel.prototype.itemTpl = tt;
407        }
408
409        this.items.each(this.initTab, this);
410    },
411
412    // private
413    afterRender : function(){
414        Ext.TabPanel.superclass.afterRender.call(this);
415        if(this.autoTabs){
416            this.readTabs(false);
417        }
418        if(this.activeTab !== undefined){
419            var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
420            delete this.activeTab;
421            this.setActiveTab(item);
422        }
423    },
424
425    // private
426    initEvents : function(){
427        Ext.TabPanel.superclass.initEvents.call(this);
428        this.on('add', this.onAdd, this, {target: this});
429        this.on('remove', this.onRemove, this, {target: this});
430
431        this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
432        this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
433        if(this.enableTabScroll){
434            this.mon(this.strip, 'mousewheel', this.onWheel, this);
435        }
436    },
437
438    // private
439    findTargets : function(e){
440        var item = null;
441        var itemEl = e.getTarget('li', this.strip);
442        if(itemEl){
443            item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
444            if(item.disabled){
445                return {
446                    close : null,
447                    item : null,
448                    el : null
449                };
450            }
451        }
452        return {
453            close : e.getTarget('.x-tab-strip-close', this.strip),
454            item : item,
455            el : itemEl
456        };
457    },
458
459    // private
460    onStripMouseDown : function(e){
461        if(e.button !== 0){
462            return;
463        }
464        e.preventDefault();
465        var t = this.findTargets(e);
466        if(t.close){
467            if (t.item.fireEvent('beforeclose', t.item) !== false) {
468                t.item.fireEvent('close', t.item);
469                this.remove(t.item);
470            }
471            return;
472        }
473        if(t.item && t.item != this.activeTab){
474            this.setActiveTab(t.item);
475        }
476    },
477
478    // private
479    onStripContextMenu : function(e){
480        e.preventDefault();
481        var t = this.findTargets(e);
482        if(t.item){
483            this.fireEvent('contextmenu', this, t.item, e);
484        }
485    },
486
487    /**
488     * True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the
489     * <tt>{@link #autoTabSelector}</tt>
490     * @param {Boolean} removeExisting True to remove existing tabs
491     */
492    readTabs : function(removeExisting){
493        if(removeExisting === true){
494            this.items.each(function(item){
495                this.remove(item);
496            }, this);
497        }
498        var tabs = this.el.query(this.autoTabSelector);
499        for(var i = 0, len = tabs.length; i < len; i++){
500            var tab = tabs[i];
501            var title = tab.getAttribute('title');
502            tab.removeAttribute('title');
503            this.add({
504                title: title,
505                contentEl: tab
506            });
507        }
508    },
509
510    // private
511    initTab : function(item, index){
512        var before = this.strip.dom.childNodes[index];
513        var p = this.getTemplateArgs(item);
514        var el = before ?
515                 this.itemTpl.insertBefore(before, p) :
516                 this.itemTpl.append(this.strip, p);
517
518        Ext.fly(el).addClassOnOver('x-tab-strip-over');
519
520        if(item.tabTip){
521            Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
522        }
523        item.tabEl = el;
524
525        item.on('disable', this.onItemDisabled, this);
526        item.on('enable', this.onItemEnabled, this);
527        item.on('titlechange', this.onItemTitleChanged, this);
528        item.on('iconchange', this.onItemIconChanged, this);
529        item.on('beforeshow', this.onBeforeShowItem, this);
530    },
531
532    /**
533     * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
534     * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
535     * to create a formatted, clickable tab selector element. The properties which must be returned
536     * are:</p><div class="mdetail-params"><ul>
537     * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
538     * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
539     * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
540     * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
541     * </ul></div>
542     * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
543     * @return {Object} An object hash containing the properties required to render the selector element.
544     */
545    getTemplateArgs : function(item) {
546        var cls = item.closable ? 'x-tab-strip-closable' : '';
547        if(item.disabled){
548            cls += ' x-item-disabled';
549        }
550        if(item.iconCls){
551            cls += ' x-tab-with-icon';
552        }
553        if(item.tabCls){
554            cls += ' ' + item.tabCls;
555        }
556
557        return {
558            id: this.id + this.idDelimiter + item.getItemId(),
559            text: item.title,
560            cls: cls,
561            iconCls: item.iconCls || ''
562        };
563    },
564
565    // private
566    onAdd : function(tp, item, index){
567        this.initTab(item, index);
568        if(this.items.getCount() == 1){
569            this.syncSize();
570        }
571        this.delegateUpdates();
572    },
573
574    // private
575    onBeforeAdd : function(item){
576        var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
577        if(existing){
578            this.setActiveTab(item);
579            return false;
580        }
581        Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
582        var es = item.elements;
583        item.elements = es ? es.replace(',header', '') : es;
584        item.border = (item.border === true);
585    },
586
587    // private
588    onRemove : function(tp, item){
589        Ext.destroy(Ext.get(this.getTabEl(item)));
590        this.stack.remove(item);
591        item.un('disable', this.onItemDisabled, this);
592        item.un('enable', this.onItemEnabled, this);
593        item.un('titlechange', this.onItemTitleChanged, this);
594        item.un('iconchange', this.onItemIconChanged, this);
595        item.un('beforeshow', this.onBeforeShowItem, this);
596        if(item == this.activeTab){
597            var next = this.stack.next();
598            if(next){
599                this.setActiveTab(next);
600            }else if(this.items.getCount() > 0){
601                this.setActiveTab(0);
602            }else{
603                this.activeTab = null;
604            }
605        }
606        this.delegateUpdates();
607    },
608
609    // private
610    onBeforeShowItem : function(item){
611        if(item != this.activeTab){
612            this.setActiveTab(item);
613            return false;
614        }
615    },
616
617    // private
618    onItemDisabled : function(item){
619        var el = this.getTabEl(item);
620        if(el){
621            Ext.fly(el).addClass('x-item-disabled');
622        }
623        this.stack.remove(item);
624    },
625
626    // private
627    onItemEnabled : function(item){
628        var el = this.getTabEl(item);
629        if(el){
630            Ext.fly(el).removeClass('x-item-disabled');
631        }
632    },
633
634    // private
635    onItemTitleChanged : function(item){
636        var el = this.getTabEl(item);
637        if(el){
638            Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
639        }
640    },
641
642    //private
643    onItemIconChanged : function(item, iconCls, oldCls){
644        var el = this.getTabEl(item);
645        if(el){
646            Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
647        }
648    },
649
650    /**
651     * Gets the DOM element for the tab strip item which activates the child panel with the specified
652     * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
653     * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
654     * @return {HTMLElement} The DOM node
655     */
656    getTabEl : function(item){
657        return document.getElementById(this.id + this.idDelimiter + this.getComponent(item).getItemId());
658    },
659
660    // private
661    onResize : function(){
662        Ext.TabPanel.superclass.onResize.apply(this, arguments);
663        this.delegateUpdates();
664    },
665
666    /**
667     * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
668     */
669    beginUpdate : function(){
670        this.suspendUpdates = true;
671    },
672
673    /**
674     * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
675     */
676    endUpdate : function(){
677        this.suspendUpdates = false;
678        this.delegateUpdates();
679    },
680
681    /**
682     * Hides the tab strip item for the passed tab
683     * @param {Number/String/Panel} item The tab index, id or item
684     */
685    hideTabStripItem : function(item){
686        item = this.getComponent(item);
687        var el = this.getTabEl(item);
688        if(el){
689            el.style.display = 'none';
690            this.delegateUpdates();
691        }
692        this.stack.remove(item);
693    },
694
695    /**
696     * Unhides the tab strip item for the passed tab
697     * @param {Number/String/Panel} item The tab index, id or item
698     */
699    unhideTabStripItem : function(item){
700        item = this.getComponent(item);
701        var el = this.getTabEl(item);
702        if(el){
703            el.style.display = '';
704            this.delegateUpdates();
705        }
706    },
707
708    // private
709    delegateUpdates : function(){
710        if(this.suspendUpdates){
711            return;
712        }
713        if(this.resizeTabs && this.rendered){
714            this.autoSizeTabs();
715        }
716        if(this.enableTabScroll && this.rendered){
717            this.autoScrollTabs();
718        }
719    },
720
721    // private
722    autoSizeTabs : function(){
723        var count = this.items.length;
724        var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
725        var ow = this[ce].dom.offsetWidth;
726        var aw = this[ce].dom.clientWidth;
727
728        if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
729            return;
730        }
731
732        var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
733        this.lastTabWidth = each;
734        var lis = this.strip.query("li:not([className^=x-tab-edge])");
735        for(var i = 0, len = lis.length; i < len; i++) {
736            var li = lis[i];
737            var inner = Ext.fly(li).child('.x-tab-strip-inner', true);
738            var tw = li.offsetWidth;
739            var iw = inner.offsetWidth;
740            inner.style.width = (each - (tw-iw)) + 'px';
741        }
742    },
743
744    // private
745    adjustBodyWidth : function(w){
746        if(this.header){
747            this.header.setWidth(w);
748        }
749        if(this.footer){
750            this.footer.setWidth(w);
751        }
752        return w;
753    },
754
755    /**
756     * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
757     * can <tt>return false</tt> to cancel the tab change.
758     * @param {String/Number} item
759     * The id or tab Panel to activate. This parameter may be any of the following:
760     * <div><ul class="mdetail-params">
761     * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
762     * or <code>{@link Ext.Component#id id}</code> of the child component </li>
763     * <li>a <b><tt>Number</tt></b> : representing the position of the child component
764     * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
765     * </ul></div>
766     * <p>For additional information see {@link Ext.util.MixedCollection#get}.
767     */
768    setActiveTab : function(item){
769        item = this.getComponent(item);
770        if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
771            return;
772        }
773        if(!this.rendered){
774            this.activeTab = item;
775            return;
776        }
777        if(this.activeTab != item){
778            if(this.activeTab){
779                var oldEl = this.getTabEl(this.activeTab);
780                if(oldEl){
781                    Ext.fly(oldEl).removeClass('x-tab-strip-active');
782                }
783                this.activeTab.fireEvent('deactivate', this.activeTab);
784            }
785            var el = this.getTabEl(item);
786            Ext.fly(el).addClass('x-tab-strip-active');
787            this.activeTab = item;
788            this.stack.add(item);
789
790            this.layout.setActiveItem(item);
791            if(this.scrolling){
792                this.scrollToTab(item, this.animScroll);
793            }
794
795            item.fireEvent('activate', item);
796            this.fireEvent('tabchange', this, item);
797        }
798    },
799
800    /**
801     * Gets the currently active tab.
802     * @return {Panel} The active tab
803     */
804    getActiveTab : function(){
805        return this.activeTab || null;
806    },
807
808    /**
809     * Gets the specified tab by id.
810     * @param {String} id The tab id
811     * @return {Panel} The tab
812     */
813    getItem : function(item){
814        return this.getComponent(item);
815    },
816
817    // private
818    autoScrollTabs : function(){
819        this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
820        var count = this.items.length;
821        var ow = this.pos.dom.offsetWidth;
822        var tw = this.pos.dom.clientWidth;
823
824        var wrap = this.stripWrap;
825        var wd = wrap.dom;
826        var cw = wd.offsetWidth;
827        var pos = this.getScrollPos();
828        var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
829
830        if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
831            return;
832        }
833        if(l <= tw){
834            wd.scrollLeft = 0;
835            wrap.setWidth(tw);
836            if(this.scrolling){
837                this.scrolling = false;
838                this.pos.removeClass('x-tab-scrolling');
839                this.scrollLeft.hide();
840                this.scrollRight.hide();
841                // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
842                if(Ext.isAir || Ext.isWebKit){
843                    wd.style.marginLeft = '';
844                    wd.style.marginRight = '';
845                }
846            }
847        }else{
848            if(!this.scrolling){
849                this.pos.addClass('x-tab-scrolling');
850                // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
851                if(Ext.isAir || Ext.isWebKit){
852                    wd.style.marginLeft = '18px';
853                    wd.style.marginRight = '18px';
854                }
855            }
856            tw -= wrap.getMargins('lr');
857            wrap.setWidth(tw > 20 ? tw : 20);
858            if(!this.scrolling){
859                if(!this.scrollLeft){
860                    this.createScrollers();
861                }else{
862                    this.scrollLeft.show();
863                    this.scrollRight.show();
864                }
865            }
866            this.scrolling = true;
867            if(pos > (l-tw)){ // ensure it stays within bounds
868                wd.scrollLeft = l-tw;
869            }else{ // otherwise, make sure the active tab is still visible
870                this.scrollToTab(this.activeTab, false);
871            }
872            this.updateScrollButtons();
873        }
874    },
875
876    // private
877    createScrollers : function(){
878        this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
879        var h = this.stripWrap.dom.offsetHeight;
880
881        // left
882        var sl = this.pos.insertFirst({
883            cls:'x-tab-scroller-left'
884        });
885        sl.setHeight(h);
886        sl.addClassOnOver('x-tab-scroller-left-over');
887        this.leftRepeater = new Ext.util.ClickRepeater(sl, {
888            interval : this.scrollRepeatInterval,
889            handler: this.onScrollLeft,
890            scope: this
891        });
892        this.scrollLeft = sl;
893
894        // right
895        var sr = this.pos.insertFirst({
896            cls:'x-tab-scroller-right'
897        });
898        sr.setHeight(h);
899        sr.addClassOnOver('x-tab-scroller-right-over');
900        this.rightRepeater = new Ext.util.ClickRepeater(sr, {
901            interval : this.scrollRepeatInterval,
902            handler: this.onScrollRight,
903            scope: this
904        });
905        this.scrollRight = sr;
906    },
907
908    // private
909    getScrollWidth : function(){
910        return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
911    },
912
913    // private
914    getScrollPos : function(){
915        return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
916    },
917
918    // private
919    getScrollArea : function(){
920        return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
921    },
922
923    // private
924    getScrollAnim : function(){
925        return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
926    },
927
928    // private
929    getScrollIncrement : function(){
930        return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
931    },
932
933    /**
934     * Scrolls to a particular tab if tab scrolling is enabled
935     * @param {Panel} item The item to scroll to
936     * @param {Boolean} animate True to enable animations
937     */
938
939    scrollToTab : function(item, animate){
940        if(!item){ return; }
941        var el = this.getTabEl(item);
942        var pos = this.getScrollPos(), area = this.getScrollArea();
943        var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
944        var right = left + el.offsetWidth;
945        if(left < pos){
946            this.scrollTo(left, animate);
947        }else if(right > (pos + area)){
948            this.scrollTo(right - area, animate);
949        }
950    },
951
952    // private
953    scrollTo : function(pos, animate){
954        this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
955        if(!animate){
956            this.updateScrollButtons();
957        }
958    },
959
960    onWheel : function(e){
961        var d = e.getWheelDelta()*this.wheelIncrement*-1;
962        e.stopEvent();
963
964        var pos = this.getScrollPos();
965        var newpos = pos + d;
966        var sw = this.getScrollWidth()-this.getScrollArea();
967
968        var s = Math.max(0, Math.min(sw, newpos));
969        if(s != pos){
970            this.scrollTo(s, false);
971        }
972    },
973
974    // private
975    onScrollRight : function(){
976        var sw = this.getScrollWidth()-this.getScrollArea();
977        var pos = this.getScrollPos();
978        var s = Math.min(sw, pos + this.getScrollIncrement());
979        if(s != pos){
980            this.scrollTo(s, this.animScroll);
981        }
982    },
983
984    // private
985    onScrollLeft : function(){
986        var pos = this.getScrollPos();
987        var s = Math.max(0, pos - this.getScrollIncrement());
988        if(s != pos){
989            this.scrollTo(s, this.animScroll);
990        }
991    },
992
993    // private
994    updateScrollButtons : function(){
995        var pos = this.getScrollPos();
996        this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
997        this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
998    },
999
1000    // private
1001    beforeDestroy : function() {
1002        if(this.items){
1003            this.items.each(function(item){
1004                if(item && item.tabEl){
1005                    Ext.get(item.tabEl).removeAllListeners();
1006                    item.tabEl = null;
1007                }
1008            }, this);
1009        }
1010        if(this.strip){
1011            this.strip.removeAllListeners();
1012        }
1013        Ext.TabPanel.superclass.beforeDestroy.apply(this);
1014    }
1015
1016    /**
1017     * @cfg {Boolean} collapsible
1018     * @hide
1019     */
1020    /**
1021     * @cfg {String} header
1022     * @hide
1023     */
1024    /**
1025     * @cfg {Boolean} headerAsText
1026     * @hide
1027     */
1028    /**
1029     * @property header
1030     * @hide
1031     */
1032    /**
1033     * @property title
1034     * @hide
1035     */
1036    /**
1037     * @cfg {Array} tools
1038     * @hide
1039     */
1040    /**
1041     * @cfg {Array} toolTemplate
1042     * @hide
1043     */
1044    /**
1045     * @cfg {Boolean} hideCollapseTool
1046     * @hide
1047     */
1048    /**
1049     * @cfg {Boolean} titleCollapse
1050     * @hide
1051     */
1052    /**
1053     * @cfg {Boolean} collapsed
1054     * @hide
1055     */
1056    /**
1057     * @cfg {String} layout
1058     * @hide
1059     */
1060    /**
1061     * @cfg {Boolean} preventBodyReset
1062     * @hide
1063     */
1064});
1065Ext.reg('tabpanel', Ext.TabPanel);
1066
1067/**
1068 * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
1069 * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
1070 * @param {String/Panel} tab The id or tab Panel to activate
1071 * @method activate
1072 */
1073Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1074
1075// private utility class used by TabPanel
1076Ext.TabPanel.AccessStack = function(){
1077    var items = [];
1078    return {
1079        add : function(item){
1080            items.push(item);
1081            if(items.length > 10){
1082                items.shift();
1083            }
1084        },
1085
1086        remove : function(item){
1087            var s = [];
1088            for(var i = 0, len = items.length; i < len; i++) {
1089                if(items[i] != item){
1090                    s.push(items[i]);
1091                }
1092            }
1093            items = s;
1094        },
1095
1096        next : function(){
1097            return items.pop();
1098        }
1099    };
1100};
Note: See TracBrowser for help on using the repository browser.