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

Question

У меня есть 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 сворачивается, потому что сбрасываемый элемент сжимается или расширяется, если вы нажимаете на collapsebar.

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 имеет расположение: "граница 'и кнопку, которая расширяет или сворачивает tabPanel.

Answer 2

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