Extjs 在窗口中折叠选项卡面板

我有一个带有边框布局的

Ext.Window

。此窗口包含网格和选项卡面板。这是我的选项卡面板：

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

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

我只想用窗口中的一个按钮来折叠\展开它。

---

问题是如何消除可折叠项的正常行为，因为当我从默认值单击另一个选项卡时，选项卡面板会折叠，因为可折叠项会折叠或展开，如果您单击折叠栏也会折叠或展开。

您可以在折叠之前附加/侦听事件，并在那里返回false，这将防止折叠。请参见

好的，我解决了我的问题。如果对任何人有用，我就是这样做的： 我将此属性设置为我的选项卡面板：

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

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

Ext.override（Ext.layout.BorderLayout.Region，{
getCollapsedEl:函数（）{
如果（！this.collapsedEl）{
如果（！this.toolTemplate）{
var tt=新的外部模板(
'*'
);
tt.disableFormats=true；
tt.compile（）；
Ext.layout.BorderLayout.Region.prototype.toolTemplate=tt；
}
this.collapsedEl=this.targetEl.createChild({
cls:“x布局-折叠x布局-折叠-”+此位置，
id:this.panel.id+'-xcollapsed'
});
此.collapsedEl.enableDisplayMode（'none'）；/*从块更改*/
if（this.collapseMode=='mini'）{
this.collapsedEl.addClass（'x-layout-cmini-'+this.position）；
this.miniclapsedel=this.collapsedEl.createChild({
cls:“x-layout-mini x-layout-mini-”+this.position，html:*”
});
这个.miniclappsedel.addClassOnOver（'x-layout-mini-over'）；
此.collapsedEl.addClassOnOver（“x-layout-collapsedEl-over”）；
this.collapsedEl.on（'click'，this.onExpandClick，this，{stopEvent:true}）；
}否则{
if（（this.collapsetool！==false）&&！this.hideCollapseTool）{
var t=this.toolTemplate.append(
这个.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）{
此.collapsedEl.addClassOnOver（“x-layout-collapsedEl-over”）；
this.collapsedEl.on（“单击”，this[this.floatable？'collapseClick'：'onExpandClick']，this）；
}
}
}
返回此文件。collapsedEl；
}

---

然后窗口包含TabPAnel的布局：'border'和一个展开或折叠TabPAnel的按钮。

好的，我证明，但还有一个问题。我现在证明使用stopevent方法，因为如果我附加了一个侦听器，我消除了折叠面板的可能？？