Свернуть TabPanel в окне

Question

У меня есть Ext.Window с макетом границы. Это окно содержит сетку и TabPanel. Это моя 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]
});

Я хочу свернуть \ развернуть это только кнопкой в ​​окне. Проблема состоит в том, как устранить нормальное поведение сворачиваемого элемента, потому что, когда я щелкаю по другой вкладке по умолчанию, TabPanel сворачивается, потому что сворачиваемый элемент сворачивается или разворачивается, также если вы нажимаете на панель свертывания.

Answer 1

Хорошо, я решаю свою проблему. Если это полезно для кого-то, это то, что я делаю: я даю установить эти свойства моей 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]
            });

и сделать это переопределить

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;
}

Тогда у окна, содержащего TabPAnel, есть макет:'border' и кнопка, которая разворачивает или сворачивает tabPanel.

Answer 2

Вы можете прикрепить / прослушать событие beforeCollapse и вернуть туда false, что предотвратит коллапс. Пожалуйста, смотрите эту ссылку