Bienvenue sur PostGIS.fr

Bienvenue sur PostGIS.fr , le site de la communauté des utilisateurs francophones de PostGIS.

PostGIS ajoute le support d'objets géographique à la base de données PostgreSQL. En effet, PostGIS "spatialise" le serverur PostgreSQL, ce qui permet de l'utiliser comme une base de données SIG.

Maintenu à jour, en fonction de nos disponibilités et des diverses sorties des outils que nous testons, nous vous proposons l'ensemble de nos travaux publiés en langue française.

source: trunk/workshop-routing-foss4g/web/ext/src/widgets/TabPanel.js @ 76

Revision 76, 40.4 KB checked in by djay, 12 years ago (diff)

Ajout du répertoire web

  • Property svn:executable set to *
Line 
1/*!
2 * Ext JS Library 3.4.0
3 * Copyright(c) 2006-2011 Sencha Inc.
4 * licensing@sencha.com
5 * http://www.sencha.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 * <li><tt><b>{@link Ext.Panel#beforeclose beforeclose}</b></tt> : Fires when the user clicks on the close tool of a closeable tab.
37 * May be vetoed by returning <code>false</code> from a handler.</li>
38 * <li><tt><b>{@link Ext.Panel#close close}</b></tt> : Fires a closeable tab has been closed by the user.</li>
39 * </ul></div>
40 * <p><b><u>Creating TabPanels from Code</u></b></p>
41 * <p>TabPanels can be created and rendered completely in code, as in this example:</p>
42 * <pre><code>
43var tabs = new Ext.TabPanel({
44    renderTo: Ext.getBody(),
45    activeTab: 0,
46    items: [{
47        title: 'Tab 1',
48        html: 'A simple tab'
49    },{
50        title: 'Tab 2',
51        html: 'Another one'
52    }]
53});
54</code></pre>
55 * <p><b><u>Creating TabPanels from Existing Markup</u></b></p>
56 * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p>
57 * <div><ul class="mdetail-params">
58 *
59 * <li>Pre-Structured Markup</li>
60 * <div class="sub-desc">
61 * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely
62 * from existing markup (See the {@link #autoTabs} example).</p>
63 * </div>
64 *
65 * <li>Un-Structured Markup</li>
66 * <div class="sub-desc">
67 * <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
68 * which elements should be the container and the tabs. Using this method tab content can be pulled from different
69 * elements within the page by id regardless of page structure. For example:</p>
70 * <pre><code>
71var tabs = new Ext.TabPanel({
72    renderTo: 'my-tabs',
73    activeTab: 0,
74    items:[
75        {contentEl:'tab1', title:'Tab 1'},
76        {contentEl:'tab2', title:'Tab 2'}
77    ]
78});
79
80// Note that the tabs do not have to be nested within the container (although they can be)
81&lt;div id="my-tabs">&lt;/div>
82&lt;div id="tab1" class="x-hide-display">A simple tab&lt;/div>
83&lt;div id="tab2" class="x-hide-display">Another one&lt;/div>
84</code></pre>
85 * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
86 * deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt>
87 * to render all content tabs on page load.
88 * </div>
89 *
90 * </ul></div>
91 *
92 * @extends Ext.Panel
93 * @constructor
94 * @param {Object} config The configuration options
95 * @xtype tabpanel
96 */
97Ext.TabPanel = Ext.extend(Ext.Panel,  {
98    /**
99     * @cfg {Boolean} layoutOnTabChange
100     * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
101     * See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
102     */
103    /**
104     * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
105     * class name applied to the tab strip item representing the child Component, allowing special
106     * styling to be applied.
107     */
108    /**
109     * @cfg {Boolean} deferredRender
110     * <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt>
111     * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
112     * <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout}
113     * is rendered. If there is a significant amount of content or a lot of heavy controls being
114     * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
115     * improve performance.</p>
116     * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
117     * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
118     * configuration value.</p>
119     * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
120     * within an unactivated tab will not be available. For example, this means that if the TabPanel
121     * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
122     * unactivated tabs will not be rendered, and will therefore not be submitted and will not be
123     * available to either {@link Ext.form.BasicForm#getValues getValues} or
124     * {@link Ext.form.BasicForm#setValues setValues}.</p>
125     */
126    deferredRender : true,
127    /**
128     * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
129     */
130    tabWidth : 120,
131    /**
132     * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
133     */
134    minTabWidth : 30,
135    /**
136     * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
137     * tab strip (defaults to false).  Setting this to true may cause specific widths that might be set per tab to
138     * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
139     */
140    resizeTabs : false,
141    /**
142     * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
143     * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
144     */
145    enableTabScroll : false,
146    /**
147     * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
148     * (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width).  Only
149     * applies when <tt>{@link #enableTabScroll} = true</tt>.
150     */
151    scrollIncrement : 0,
152    /**
153     * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
154     * continuously pressed (defaults to <tt>400</tt>).
155     */
156    scrollRepeatInterval : 400,
157    /**
158     * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
159     * to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>.
160     */
161    scrollDuration : 0.35,
162    /**
163     * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
164     * to <tt>true</tt>).  Only applies when <tt>{@link #enableTabScroll} = true</tt>.
165     */
166    animScroll : true,
167    /**
168     * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
169     * The only other supported value is <tt>'bottom'</tt>.  <b>Note</b>: tab scrolling is only supported for
170     * <tt>tabPosition: 'top'</tt>.
171     */
172    tabPosition : 'top',
173    /**
174     * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
175     */
176    baseCls : 'x-tab-panel',
177    /**
178     * @cfg {Boolean} autoTabs
179     * <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted
180     * to tabs and added to this panel (defaults to <tt>false</tt>).  Note that the query will be executed within
181     * the scope of the container element only (so that multiple tab panels from markup can be supported via this
182     * method).</p>
183     * <p>This method is only possible when the markup is structured correctly as a container with nested divs
184     * containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content
185     * from other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
186     * <p>There are a couple of things to note when using this method:<ul>
187     * <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's
188     * {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt>
189     * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
190     * components.</li>
191     * <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each
192     * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
193     * until each tab is activated and will be visible outside the TabPanel.</li>
194     * </ul>Example usage:</p>
195     * <pre><code>
196var tabs = new Ext.TabPanel({
197    applyTo: 'my-tabs',
198    activeTab: 0,
199    deferredRender: false,
200    autoTabs: true
201});
202
203// This markup will be converted to a TabPanel from the code above
204&lt;div id="my-tabs">
205    &lt;div class="x-tab" title="Tab 1">A simple tab&lt;/div>
206    &lt;div class="x-tab" title="Tab 2">Another one&lt;/div>
207&lt;/div>
208</code></pre>
209     */
210    autoTabs : false,
211    /**
212     * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
213     * <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>).  This can be any valid selector
214     * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
215     * tab panel only (so that multiple tab panels from markup can be supported on a page).
216     */
217    autoTabSelector : 'div.x-tab',
218    /**
219     * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
220     * activated on render (defaults to undefined).
221     */
222    activeTab : undefined,
223    /**
224     * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
225     * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
226     * with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
227     */
228    tabMargin : 2,
229    /**
230     * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
231     * (defaults to <tt>false</tt>).
232     */
233    plain : false,
234    /**
235     * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
236     * scrolling (defaults to <tt>20</tt>).
237     */
238    wheelIncrement : 20,
239
240    /*
241     * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
242     * It does not generally need to be changed, but can be if external code also uses an id scheme that can
243     * potentially clash with this one.
244     */
245    idDelimiter : '__',
246
247    // private
248    itemCls : 'x-tab-item',
249
250    // private config overrides
251    elements : 'body',
252    headerAsText : false,
253    frame : false,
254    hideBorders :true,
255
256    // private
257    initComponent : function(){
258        this.frame = false;
259        Ext.TabPanel.superclass.initComponent.call(this);
260        this.addEvents(
261            /**
262             * @event beforetabchange
263             * Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change.
264             * @param {TabPanel} this
265             * @param {Panel} newTab The tab being activated
266             * @param {Panel} currentTab The current active tab
267             */
268            'beforetabchange',
269            /**
270             * @event tabchange
271             * Fires after the active tab has changed.
272             * @param {TabPanel} this
273             * @param {Panel} tab The new active tab
274             */
275            'tabchange',
276            /**
277             * @event contextmenu
278             * Relays the contextmenu event from a tab selector element in the tab strip.
279             * @param {TabPanel} this
280             * @param {Panel} tab The target tab
281             * @param {EventObject} e
282             */
283            'contextmenu'
284        );
285        /**
286         * @cfg {Object} layoutConfig
287         * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
288         * <code>layoutConfig</code> may be used to configure this layout manager.
289         * <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code>
290         * configured on the TabPanel will be applied as configs to the layout manager.
291         */
292        this.setLayout(new Ext.layout.CardLayout(Ext.apply({
293            layoutOnCardChange: this.layoutOnTabChange,
294            deferredRender: this.deferredRender
295        }, this.layoutConfig)));
296
297        if(this.tabPosition == 'top'){
298            this.elements += ',header';
299            this.stripTarget = 'header';
300        }else {
301            this.elements += ',footer';
302            this.stripTarget = 'footer';
303        }
304        if(!this.stack){
305            this.stack = Ext.TabPanel.AccessStack();
306        }
307        this.initItems();
308    },
309
310    // private
311    onRender : function(ct, position){
312        Ext.TabPanel.superclass.onRender.call(this, ct, position);
313
314        if(this.plain){
315            var pos = this.tabPosition == 'top' ? 'header' : 'footer';
316            this[pos].addClass('x-tab-panel-'+pos+'-plain');
317        }
318
319        var st = this[this.stripTarget];
320
321        this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
322            tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
323
324        var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
325        st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
326        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
327
328        // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
329        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: '&#160;'}]});
330        this.strip.createChild({cls:'x-clear'});
331
332        this.body.addClass('x-tab-panel-body-'+this.tabPosition);
333
334        /**
335         * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
336         * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
337         * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
338         * <p>The main element created should be a <tt>&lt;li></tt> element. In order for a click event on
339         * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
340         * native <tt>{@link #getTemplateArgs}</tt>.</p>
341         * <p>The child element which contains the title text must be marked by the CSS class
342         * <tt>x-tab-strip-inner</tt>.</p>
343         * <p>To enable closability, the created element should contain an element marked by the CSS class
344         * <tt>x-tab-strip-close</tt>.</p>
345         * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
346         * style rules to create the desired appearance.</p>
347         * Below is an example of how to create customized tab selector items:<pre><code>
348new Ext.TabPanel({
349    renderTo: document.body,
350    minTabWidth: 115,
351    tabWidth: 135,
352    enableTabScroll: true,
353    width: 600,
354    height: 250,
355    defaults: {autoScroll:true},
356    itemTpl: new Ext.XTemplate(
357    '&lt;li class="{cls}" id="{id}" style="overflow:hidden">',
358         '&lt;tpl if="closable">',
359            '&lt;a class="x-tab-strip-close">&lt;/a>',
360         '&lt;/tpl>',
361         '&lt;a class="x-tab-right" href="#" style="padding-left:6px">',
362            '&lt;em class="x-tab-left">',
363                '&lt;span class="x-tab-strip-inner">',
364                    '&lt;img src="{src}" style="float:left;margin:3px 3px 0 0">',
365                    '&lt;span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}&lt;/span>',
366                '&lt;/span>',
367            '&lt;/em>',
368        '&lt;/a>',
369    '&lt;/li>'
370    ),
371    getTemplateArgs: function(item) {
372//      Call the native method to collect the base data. Like the ID!
373        var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
374
375//      Add stuff used in our template
376        return Ext.apply(result, {
377            closable: item.closable,
378            src: item.iconSrc,
379            extra: item.extraText || ''
380        });
381    },
382    items: [{
383        title: 'New Tab 1',
384        iconSrc: '../shared/icons/fam/grid.png',
385        html: 'Tab Body 1',
386        closable: true
387    }, {
388        title: 'New Tab 2',
389        iconSrc: '../shared/icons/fam/grid.png',
390        html: 'Tab Body 2',
391        extraText: 'Extra stuff in the tab button'
392    }]
393});
394</code></pre>
395         */
396        if(!this.itemTpl){
397            var tt = new Ext.Template(
398                 '<li class="{cls}" id="{id}"><a class="x-tab-strip-close"></a>',
399                 '<a class="x-tab-right" href="#"><em class="x-tab-left">',
400                 '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
401                 '</em></a></li>'
402            );
403            tt.disableFormats = true;
404            tt.compile();
405            Ext.TabPanel.prototype.itemTpl = tt;
406        }
407
408        this.items.each(this.initTab, this);
409    },
410
411    // private
412    afterRender : function(){
413        Ext.TabPanel.superclass.afterRender.call(this);
414        if(this.autoTabs){
415            this.readTabs(false);
416        }
417        if(this.activeTab !== undefined){
418            var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
419            delete this.activeTab;
420            this.setActiveTab(item);
421        }
422    },
423
424    // private
425    initEvents : function(){
426        Ext.TabPanel.superclass.initEvents.call(this);
427        this.mon(this.strip, {
428            scope: this,
429            mousedown: this.onStripMouseDown,
430            contextmenu: this.onStripContextMenu
431        });
432        if(this.enableTabScroll){
433            this.mon(this.strip, 'mousewheel', this.onWheel, this);
434        }
435    },
436
437    // private
438    findTargets : function(e){
439        var item = null,
440            itemEl = e.getTarget('li:not(.x-tab-edge)', this.strip);
441
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                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            p = this.getTemplateArgs(item),
514            el = before ?
515                 this.itemTpl.insertBefore(before, p) :
516                 this.itemTpl.append(this.strip, p),
517            cls = 'x-tab-strip-over',
518            tabEl = Ext.get(el);
519
520        tabEl.hover(function(){
521            if(!item.disabled){
522                tabEl.addClass(cls);
523            }
524        }, function(){
525            tabEl.removeClass(cls);
526        });
527
528        if(item.tabTip){
529            tabEl.child('span.x-tab-strip-text', true).qtip = item.tabTip;
530        }
531        item.tabEl = el;
532
533        // Route *keyboard triggered* click events to the tab strip mouse handler.
534        tabEl.select('a').on('click', function(e){
535            if(!e.getPageX()){
536                this.onStripMouseDown(e);
537            }
538        }, this, {preventDefault: true});
539
540        item.on({
541            scope: this,
542            disable: this.onItemDisabled,
543            enable: this.onItemEnabled,
544            titlechange: this.onItemTitleChanged,
545            iconchange: this.onItemIconChanged,
546            beforeshow: this.onBeforeShowItem
547        });
548    },
549
550
551
552    /**
553     * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
554     * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
555     * to create a formatted, clickable tab selector element. The properties which must be returned
556     * are:</p><div class="mdetail-params"><ul>
557     * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
558     * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
559     * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
560     * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
561     * </ul></div>
562     * @param {Ext.BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
563     * @return {Object} An object hash containing the properties required to render the selector element.
564     */
565    getTemplateArgs : function(item) {
566        var cls = item.closable ? 'x-tab-strip-closable' : '';
567        if(item.disabled){
568            cls += ' x-item-disabled';
569        }
570        if(item.iconCls){
571            cls += ' x-tab-with-icon';
572        }
573        if(item.tabCls){
574            cls += ' ' + item.tabCls;
575        }
576
577        return {
578            id: this.id + this.idDelimiter + item.getItemId(),
579            text: item.title,
580            cls: cls,
581            iconCls: item.iconCls || ''
582        };
583    },
584
585    // private
586    onAdd : function(c){
587        Ext.TabPanel.superclass.onAdd.call(this, c);
588        if(this.rendered){
589            var items = this.items;
590            this.initTab(c, items.indexOf(c));
591            this.delegateUpdates();
592        }
593    },
594
595    // private
596    onBeforeAdd : function(item){
597        var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
598        if(existing){
599            this.setActiveTab(item);
600            return false;
601        }
602        Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
603        var es = item.elements;
604        item.elements = es ? es.replace(',header', '') : es;
605        item.border = (item.border === true);
606    },
607
608    // private
609    onRemove : function(c){
610        var te = Ext.get(c.tabEl);
611        // check if the tabEl exists, it won't if the tab isn't rendered
612        if(te){
613            te.select('a').removeAllListeners();
614            Ext.destroy(te);
615        }
616        Ext.TabPanel.superclass.onRemove.call(this, c);
617        this.stack.remove(c);
618        delete c.tabEl;
619        c.un('disable', this.onItemDisabled, this);
620        c.un('enable', this.onItemEnabled, this);
621        c.un('titlechange', this.onItemTitleChanged, this);
622        c.un('iconchange', this.onItemIconChanged, this);
623        c.un('beforeshow', this.onBeforeShowItem, this);
624        if(c == this.activeTab){
625            var next = this.stack.next();
626            if(next){
627                this.setActiveTab(next);
628            }else if(this.items.getCount() > 0){
629                this.setActiveTab(0);
630            }else{
631                this.setActiveTab(null);
632            }
633        }
634        if(!this.destroying){
635            this.delegateUpdates();
636        }
637    },
638
639    // private
640    onBeforeShowItem : function(item){
641        if(item != this.activeTab){
642            this.setActiveTab(item);
643            return false;
644        }
645    },
646
647    // private
648    onItemDisabled : function(item){
649        var el = this.getTabEl(item);
650        if(el){
651            Ext.fly(el).addClass('x-item-disabled');
652        }
653        this.stack.remove(item);
654    },
655
656    // private
657    onItemEnabled : function(item){
658        var el = this.getTabEl(item);
659        if(el){
660            Ext.fly(el).removeClass('x-item-disabled');
661        }
662    },
663
664    // private
665    onItemTitleChanged : function(item){
666        var el = this.getTabEl(item);
667        if(el){
668            Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
669        }
670    },
671
672    //private
673    onItemIconChanged : function(item, iconCls, oldCls){
674        var el = this.getTabEl(item);
675        if(el){
676            el = Ext.get(el);
677            el.child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
678            el[Ext.isEmpty(iconCls) ? 'removeClass' : 'addClass']('x-tab-with-icon');
679        }
680    },
681
682    /**
683     * Gets the DOM element for the tab strip item which activates the child panel with the specified
684     * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
685     * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
686     * @return {HTMLElement} The DOM node
687     */
688    getTabEl : function(item){
689        var c = this.getComponent(item);
690        return c ? c.tabEl : null;
691    },
692
693    // private
694    onResize : function(){
695        Ext.TabPanel.superclass.onResize.apply(this, arguments);
696        this.delegateUpdates();
697    },
698
699    /**
700     * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
701     */
702    beginUpdate : function(){
703        this.suspendUpdates = true;
704    },
705
706    /**
707     * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
708     */
709    endUpdate : function(){
710        this.suspendUpdates = false;
711        this.delegateUpdates();
712    },
713
714    /**
715     * Hides the tab strip item for the passed tab
716     * @param {Number/String/Panel} item The tab index, id or item
717     */
718    hideTabStripItem : function(item){
719        item = this.getComponent(item);
720        var el = this.getTabEl(item);
721        if(el){
722            el.style.display = 'none';
723            this.delegateUpdates();
724        }
725        this.stack.remove(item);
726    },
727
728    /**
729     * Unhides the tab strip item for the passed tab
730     * @param {Number/String/Panel} item The tab index, id or item
731     */
732    unhideTabStripItem : function(item){
733        item = this.getComponent(item);
734        var el = this.getTabEl(item);
735        if(el){
736            el.style.display = '';
737            this.delegateUpdates();
738        }
739    },
740
741    // private
742    delegateUpdates : function(){
743        var rendered = this.rendered;
744        if(this.suspendUpdates){
745            return;
746        }
747        if(this.resizeTabs && rendered){
748            this.autoSizeTabs();
749        }
750        if(this.enableTabScroll && rendered){
751            this.autoScrollTabs();
752        }
753    },
754
755    // private
756    autoSizeTabs : function(){
757        var count = this.items.length,
758            ce = this.tabPosition != 'bottom' ? 'header' : 'footer',
759            ow = this[ce].dom.offsetWidth,
760            aw = this[ce].dom.clientWidth;
761
762        if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
763            return;
764        }
765
766        var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
767        this.lastTabWidth = each;
768        var lis = this.strip.query('li:not(.x-tab-edge)');
769        for(var i = 0, len = lis.length; i < len; i++) {
770            var li = lis[i],
771                inner = Ext.fly(li).child('.x-tab-strip-inner', true),
772                tw = li.offsetWidth,
773                iw = inner.offsetWidth;
774            inner.style.width = (each - (tw-iw)) + 'px';
775        }
776    },
777
778    // private
779    adjustBodyWidth : function(w){
780        if(this.header){
781            this.header.setWidth(w);
782        }
783        if(this.footer){
784            this.footer.setWidth(w);
785        }
786        return w;
787    },
788
789    /**
790     * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
791     * can <tt>return false</tt> to cancel the tab change.
792     * @param {String/Number} item
793     * The id or tab Panel to activate. This parameter may be any of the following:
794     * <div><ul class="mdetail-params">
795     * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
796     * or <code>{@link Ext.Component#id id}</code> of the child component </li>
797     * <li>a <b><tt>Number</tt></b> : representing the position of the child component
798     * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
799     * </ul></div>
800     * <p>For additional information see {@link Ext.util.MixedCollection#get}.
801     */
802    setActiveTab : function(item){
803        item = this.getComponent(item);
804        if(this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
805            return;
806        }
807        if(!this.rendered){
808            this.activeTab = item;
809            return;
810        }
811        if(this.activeTab != item){
812            if(this.activeTab){
813                var oldEl = this.getTabEl(this.activeTab);
814                if(oldEl){
815                    Ext.fly(oldEl).removeClass('x-tab-strip-active');
816                }
817            }
818            this.activeTab = item;
819            if(item){
820                var el = this.getTabEl(item);
821                Ext.fly(el).addClass('x-tab-strip-active');
822                this.stack.add(item);
823
824                this.layout.setActiveItem(item);
825                // Need to do this here, since setting the active tab slightly changes the size
826                this.delegateUpdates();
827                if(this.scrolling){
828                    this.scrollToTab(item, this.animScroll);
829                }
830            }
831            this.fireEvent('tabchange', this, item);
832        }
833    },
834
835    /**
836     * Returns the Component which is the currently active tab. <b>Note that before the TabPanel
837     * first activates a child Component, this method will return whatever was configured in the
838     * {@link #activeTab} config option.</b>
839     * @return {BoxComponent} The currently active child Component if one <i>is</i> active, or the {@link #activeTab} config value.
840     */
841    getActiveTab : function(){
842        return this.activeTab || null;
843    },
844
845    /**
846     * Gets the specified tab by id.
847     * @param {String} id The tab id
848     * @return {Panel} The tab
849     */
850    getItem : function(item){
851        return this.getComponent(item);
852    },
853
854    // private
855    autoScrollTabs : function(){
856        this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
857        var count = this.items.length,
858            ow = this.pos.dom.offsetWidth,
859            tw = this.pos.dom.clientWidth,
860            wrap = this.stripWrap,
861            wd = wrap.dom,
862            cw = wd.offsetWidth,
863            pos = this.getScrollPos(),
864            l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
865
866        if(!this.enableTabScroll || cw < 20){ // 20 to prevent display:none issues
867            return;
868        }
869        if(count == 0 || l <= tw){
870            // ensure the width is set if there's no tabs
871            wd.scrollLeft = 0;
872            wrap.setWidth(tw);
873            if(this.scrolling){
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 = '';
882                }
883            }
884        }else{
885            if(!this.scrolling){
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';
891                }
892            }
893            tw -= wrap.getMargins('lr');
894            wrap.setWidth(tw > 20 ? tw : 20);
895            if(!this.scrolling){
896                if(!this.scrollLeft){
897                    this.createScrollers();
898                }else{
899                    this.scrollLeft.show();
900                    this.scrollRight.show();
901                }
902            }
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);
908            }
909            this.updateScrollButtons();
910        }
911    },
912
913    // private
914    createScrollers : function(){
915        this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
916        var h = this.stripWrap.dom.offsetHeight;
917
918        // left
919        var sl = this.pos.insertFirst({
920            cls:'x-tab-scroller-left'
921        });
922        sl.setHeight(h);
923        sl.addClassOnOver('x-tab-scroller-left-over');
924        this.leftRepeater = new Ext.util.ClickRepeater(sl, {
925            interval : this.scrollRepeatInterval,
926            handler: this.onScrollLeft,
927            scope: this
928        });
929        this.scrollLeft = sl;
930
931        // right
932        var sr = this.pos.insertFirst({
933            cls:'x-tab-scroller-right'
934        });
935        sr.setHeight(h);
936        sr.addClassOnOver('x-tab-scroller-right-over');
937        this.rightRepeater = new Ext.util.ClickRepeater(sr, {
938            interval : this.scrollRepeatInterval,
939            handler: this.onScrollRight,
940            scope: this
941        });
942        this.scrollRight = sr;
943    },
944
945    // private
946    getScrollWidth : function(){
947        return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
948    },
949
950    // private
951    getScrollPos : function(){
952        return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
953    },
954
955    // private
956    getScrollArea : function(){
957        return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
958    },
959
960    // private
961    getScrollAnim : function(){
962        return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
963    },
964
965    // private
966    getScrollIncrement : function(){
967        return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
968    },
969
970    /**
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
974     */
975
976    scrollToTab : function(item, animate){
977        if(!item){
978            return;
979        }
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;
985        if(left < pos){
986            this.scrollTo(left, animate);
987        }else if(right > (pos + area)){
988            this.scrollTo(right - area, animate);
989        }
990    },
991
992    // private
993    scrollTo : function(pos, animate){
994        this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
995        if(!animate){
996            this.updateScrollButtons();
997        }
998    },
999
1000    onWheel : function(e){
1001        var d = e.getWheelDelta()*this.wheelIncrement*-1;
1002        e.stopEvent();
1003
1004        var pos = this.getScrollPos(),
1005            newpos = pos + d,
1006            sw = this.getScrollWidth()-this.getScrollArea();
1007
1008        var s = Math.max(0, Math.min(sw, newpos));
1009        if(s != pos){
1010            this.scrollTo(s, false);
1011        }
1012    },
1013
1014    // private
1015    onScrollRight : function(){
1016        var sw = this.getScrollWidth()-this.getScrollArea(),
1017            pos = this.getScrollPos(),
1018            s = Math.min(sw, pos + this.getScrollIncrement());
1019        if(s != pos){
1020            this.scrollTo(s, this.animScroll);
1021        }
1022    },
1023
1024    // private
1025    onScrollLeft : function(){
1026        var pos = this.getScrollPos(),
1027            s = Math.max(0, pos - this.getScrollIncrement());
1028        if(s != pos){
1029            this.scrollTo(s, this.animScroll);
1030        }
1031    },
1032
1033    // private
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');
1038    },
1039
1040    // private
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);
1046    }
1047
1048    /**
1049     * @cfg {Boolean} collapsible
1050     * @hide
1051     */
1052    /**
1053     * @cfg {String} header
1054     * @hide
1055     */
1056    /**
1057     * @cfg {Boolean} headerAsText
1058     * @hide
1059     */
1060    /**
1061     * @property header
1062     * @hide
1063     */
1064    /**
1065     * @cfg title
1066     * @hide
1067     */
1068    /**
1069     * @cfg {Array} tools
1070     * @hide
1071     */
1072    /**
1073     * @cfg {Array} toolTemplate
1074     * @hide
1075     */
1076    /**
1077     * @cfg {Boolean} hideCollapseTool
1078     * @hide
1079     */
1080    /**
1081     * @cfg {Boolean} titleCollapse
1082     * @hide
1083     */
1084    /**
1085     * @cfg {Boolean} collapsed
1086     * @hide
1087     */
1088    /**
1089     * @cfg {String} layout
1090     * @hide
1091     */
1092    /**
1093     * @cfg {Boolean} preventBodyReset
1094     * @hide
1095     */
1096});
1097Ext.reg('tabpanel', Ext.TabPanel);
1098
1099/**
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
1103 * @method activate
1104 */
1105Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
1106
1107// private utility class used by TabPanel
1108Ext.TabPanel.AccessStack = function(){
1109    var items = [];
1110    return {
1111        add : function(item){
1112            items.push(item);
1113            if(items.length > 10){
1114                items.shift();
1115            }
1116        },
1117
1118        remove : function(item){
1119            var s = [];
1120            for(var i = 0, len = items.length; i < len; i++) {
1121                if(items[i] != item){
1122                    s.push(items[i]);
1123                }
1124            }
1125            items = s;
1126        },
1127
1128        next : function(){
1129            return items.pop();
1130        }
1131    };
1132};
Note: See TracBrowser for help on using the repository browser.