0

Ext.Windowボーダーレイアウトがあります。このウィンドウには、グリッドと 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 が折りたたまれます。

4

2 に答える 2

0

わかりました、私は私の問題を解決します。誰にとっても便利な場合は、これが私がすることです:私はこのプロパティを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 が含まれ、layout:'border' と、tabPanel を展開または折りたたむボタンがあります。

于 2013-02-11T17:27:52.527 に答える
0

イベント beforeCollapse をアタッチ/リッスンし、そこで false を返すと、折りたたみを防ぐことができます。こちらのリンクをご覧ください

于 2013-02-09T05:05:02.150 に答える