view release on metacpan or  search on metacpan

share/docs/source/TabPanel.html  view on Meta::CPAN

        var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
        st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
        this.strip = new Ext.Element(this.stripWrap.dom.firstChild);

        // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
        this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: ' '}]});
        this.strip.createChild({cls:'x-clear'});

        this.body.addClass('x-tab-panel-body-'+this.tabPosition);

<span id='Ext-TabPanel-cfg-itemTpl'>        /**
</span>         * @cfg {Template/XTemplate} itemTpl &lt;p&gt;(Optional) A {@link Ext.Template Template} or
         * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
         * &lt;tt&gt;{@link #getTemplateArgs}&lt;/tt&gt; to produce a clickable selector element in the tab strip.&lt;/p&gt;
         * &lt;p&gt;The main element created should be a &lt;tt&gt;&amp;lt;li&gt;&lt;/tt&gt; element. In order for a click event on
         * a selector element to be connected to its item, it must take its &lt;i&gt;id&lt;/i&gt; from the TabPanel's
         * native &lt;tt&gt;{@link #getTemplateArgs}&lt;/tt&gt;.&lt;/p&gt;
         * &lt;p&gt;The child element which contains the title text must be marked by the CSS class
         * &lt;tt&gt;x-tab-strip-inner&lt;/tt&gt;.&lt;/p&gt;
         * &lt;p&gt;To enable closability, the created element should contain an element marked by the CSS class
         * &lt;tt&gt;x-tab-strip-close&lt;/tt&gt;.&lt;/p&gt;
         * &lt;p&gt;If a custom &lt;tt&gt;itemTpl&lt;/tt&gt; is supplied, it is the developer's responsibility to create CSS
         * style rules to create the desired appearance.&lt;/p&gt;
         * Below is an example of how to create customized tab selector items:&lt;pre&gt;&lt;code&gt;
new Ext.TabPanel({
    renderTo: document.body,
    minTabWidth: 115,
    tabWidth: 135,
    enableTabScroll: true,
    width: 600,
    height: 250,
    defaults: {autoScroll:true},
    itemTpl: new Ext.XTemplate(
    '&amp;lt;li class=&quot;{cls}&quot; id=&quot;{id}&quot; style=&quot;overflow:hidden&quot;&gt;',
         '&amp;lt;tpl if=&quot;closable&quot;&gt;',
            '&amp;lt;a class=&quot;x-tab-strip-close&quot;&gt;&amp;lt;/a&gt;',
         '&amp;lt;/tpl&gt;',
         '&amp;lt;a class=&quot;x-tab-right&quot; href=&quot;#&quot; style=&quot;padding-left:6px&quot;&gt;',
            '&amp;lt;em class=&quot;x-tab-left&quot;&gt;',
                '&amp;lt;span class=&quot;x-tab-strip-inner&quot;&gt;',
                    '&amp;lt;img src=&quot;{src}&quot; style=&quot;float:left;margin:3px 3px 0 0&quot;&gt;',
                    '&amp;lt;span style=&quot;margin-left:20px&quot; class=&quot;x-tab-strip-text {iconCls}&quot;&gt;{text} {extra}&amp;lt;/span&gt;',
                '&amp;lt;/span&gt;',
            '&amp;lt;/em&gt;',
        '&amp;lt;/a&gt;',
    '&amp;lt;/li&gt;'
    ),
    getTemplateArgs: function(item) {
//      Call the native method to collect the base data. Like the ID!
        var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);

//      Add stuff used in our template
        return Ext.apply(result, {
            closable: item.closable,
            src: item.iconSrc,
            extra: item.extraText || ''
        });
    },
    items: [{
        title: 'New Tab 1',
        iconSrc: '../shared/icons/fam/grid.png',
        html: 'Tab Body 1',
        closable: true
    }, {
        title: 'New Tab 2',
        iconSrc: '../shared/icons/fam/grid.png',
        html: 'Tab Body 2',
        extraText: 'Extra stuff in the tab button'
    }]
});
&lt;/code&gt;&lt;/pre&gt;
         */
        if(!this.itemTpl){
            var tt = new Ext.Template(
                 '&lt;li class=&quot;{cls}&quot; id=&quot;{id}&quot;&gt;&lt;a class=&quot;x-tab-strip-close&quot;&gt;&lt;/a&gt;',
                 '&lt;a class=&quot;x-tab-right&quot; href=&quot;#&quot;&gt;&lt;em class=&quot;x-tab-left&quot;&gt;',
                 '&lt;span class=&quot;x-tab-strip-inner&quot;&gt;&lt;span class=&quot;x-tab-strip-text {iconCls}&quot;&gt;{text}&lt;/span&gt;&lt;/span&gt;',
                 '&lt;/em&gt;&lt;/a&gt;&lt;/li&gt;'
            );
            tt.disableFormats = true;
            tt.compile();
            Ext.TabPanel.prototype.itemTpl = tt;
        }

        this.items.each(this.initTab, this);
    },

<span id='Ext-TabPanel-method-afterRender'>    // private
</span>    afterRender : function(){
        Ext.TabPanel.superclass.afterRender.call(this);
        if(this.autoTabs){
            this.readTabs(false);
        }
        if(this.activeTab !== undefined){
            var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
            delete this.activeTab;
            this.setActiveTab(item);
        }
    },

<span id='Ext-TabPanel-method-initEvents'>    // private
</span>    initEvents : function(){
        Ext.TabPanel.superclass.initEvents.call(this);
        this.mon(this.strip, {
            scope: this,
            mousedown: this.onStripMouseDown,
            contextmenu: this.onStripContextMenu
        });
        if(this.enableTabScroll){
            this.mon(this.strip, 'mousewheel', this.onWheel, this);
        }
    },

<span id='Ext-TabPanel-method-findTargets'>    // private
</span>    findTargets : function(e){
        var item = null,
            itemEl = e.getTarget('li:not(.x-tab-edge)', this.strip);

        if(itemEl){
            item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
            if(item.disabled){
                return {
                    close : null,
                    item : null,
                    el : null
                };