extjstabpanelextjs2

Collapse TabPanel in Window


I have an Ext.Window with border layout. This window contain a grid and a TabPanel. This is my TabPanel:

tabMsg = new Ext.TabPanel(
    id:'TabPanel',
    region : 'south',
    plain : true,
    collapsible: true,
    titleCollapse:'Modify?',
    collapsed: true,
    hideCollapseTool: true,
    //animCollapse : true,
    height : 250,
    activeTab : 0,
    deferredRender: false, // determining whether or not each tab is rendered only when first accessed (defaults to true).
    autodestroy : false,
    defaults : {bodyStyle : 'padding:10px'},
    items : [tab1,tab2,tab3]
});

I want to collapse\expand this only with a button in the window. The problem is how to eliminate the normal behavior of the collapsible item, because when I click on another tab from default the TabPanel collapses because a collapsible item collapse or expand also if you click on the collapsebar.


Solution

  • Ok, i resolve my problem. If is usefull for anyone this is what i do: i give set this properties to my TabPanel:

     tabMsgProcessedFill = new Ext.TabPanel({ 
                id:'TabPanel',
                region : 'south',
                plain : true,
                collapsible: true,
                collapsed: true,
                floatable: false,
                split:false,
                maxHeight:250,
                height:250,
                collapseMode:'mini',
                hideLabel: true,
                animCollapse : false,
                activeTab : 0,
                deferredRender: false, // determining whether or not each tab is rendered only when first accessed (defaults to true).
                autodestroy : false,
                defaults : {bodyStyle : 'padding:10px'},
                items : [tab1,tab2,tab3]
                });
    

    and make this override

    Ext.override(Ext.layout.BorderLayout.Region,{ 
    getCollapsedEl : function(){
        if(!this.collapsedEl){
            if(!this.toolTemplate){
                var tt = new Ext.Template(
                     '<div class="x-tool x-tool-{id}">*</div>'
                );
                tt.disableFormats = true;
                tt.compile();
                Ext.layout.BorderLayout.Region.prototype.toolTemplate = tt;
            }
            this.collapsedEl = this.targetEl.createChild({
                cls: "x-layout-collapsed x-layout-collapsed-"+this.position,
                id: this.panel.id + '-xcollapsed'
            });
            this.collapsedEl.enableDisplayMode('none'); /*change from block*/
    
            if(this.collapseMode == 'mini'){
                this.collapsedEl.addClass('x-layout-cmini-'+this.position);
                this.miniCollapsedEl = this.collapsedEl.createChild({
                    cls: "x-layout-mini x-layout-mini-"+this.position, html: "*"
                });
                this.miniCollapsedEl.addClassOnOver('x-layout-mini-over');
                this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
                this.collapsedEl.on('click', this.onExpandClick, this, {stopEvent:true});
            }else {
                if((this.collapsible !== false) && !this.hideCollapseTool) {
                    var t = this.toolTemplate.append(
                            this.collapsedEl.dom,
                            {id:'expand-'+this.position}, true);
                    t.addClassOnOver('x-tool-expand-'+this.position+'-over');
                    t.on('click', this.onExpandClick, this, {stopEvent:true});
                }
                if((this.floatable !== false) || this.titleCollapse) {
                   this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
                   this.collapsedEl.on("click", this[this.floatable ? 'collapseClick' : 'onExpandClick'], this);
                }
            }
        }
        return this.collapsedEl;
    }
    

    Then the window contain the TabPAnel have layout:'border' and a button who expand or collapse the tabPanel.