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

您可以在崩溃之前附加/侦听事件，并在那里返回false以防止崩溃。请参阅 this link

Answer 2

好的，我解决了我的问题。如果对任何人都有用，这就是我所做的：我将此属性设置为我的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的按钮。

在窗口中折叠TabPanel

2 个答案: