ExtJS 3.4：在隱藏的tabpanel中渲染按鈕

Question

在ExtJs 3.4中，我有一個帶有兩個選項卡的TabPanel，第二個選項卡包含一個FormPanel，其中包含一個ButtonGroup。如果第二個選項卡處於活動狀態，當我加載頁面時，一切都很好，但是當第一個選項卡處於活動狀態並且我切換到第二個選項卡時，則按鈕組中沒有按鈕，只是標籤。下面是代碼：

var tabs = new Ext.TabPanel({ 
    renderTo: 'tabs', 
    width:500, 
    forceLayout: true, 
    activeTab: 0, 
    deferredRender: false, 
    defaults:{autoHeight: true}, 
    items:[ 
     {contentEl:'tab1', title: 'Tab1'}, 
     {contentEl:'tab2', title: 'Tab2'} 
    ] 
}); 

var form = new Ext.form.FormPanel({ 
    width : 400, 
    autoHeight: true, 
    renderTo: 'form', 
    bodyStyle: 'padding: 5px', 
    items: [ 
     { 
      xtype: 'buttongroup', 
      fieldLabel: 'Label', 
      items: 
      [ 
       { 
        xtype: 'button', 
        text: 'Find By User', 
        width: 100, 
        scope: this, 
        handler: this.handleFind 
       }, 
       { 
        xtype: 'button', 
        text: 'Find All', 
        width: 100, 
        scope: this, 
        handler: this.handleFindAll 
       } 
      ] 
     } 
    ] 
}); 

我設置了deferredRender: false和forceLayout: true，也嘗試了hideMode: 'offsets'，但這些並沒有幫助。

Answer 1

好吧，我將hideMode: 'offsets'添加到TabPanel的defaults，它工作正常。幾年前我也做了同樣的事情，但沒有得到明顯的結果。

Answer 2

刪除renderTo: 'form'，並期待在工作代碼here：

var form = new Ext.form.FormPanel({ 
    width: 400, 
    autoHeight: true, 
    //renderTo: 'form', 
    bodyStyle: 'padding: 5px', 
    items: [{ 
     xtype: 'buttongroup', 
     fieldLabel: 'Label', 
     items: [{ 
      xtype: 'button', 
      text: 'Find By User', 
      width: 100, 
      scope: this, 
      handler: this.handleFind 
     }, { 
      xtype: 'button', 
      text: 'Find All', 
      width: 100, 
      scope: this, 
      handler: this.handleFindAll 
     }] 
    }] 
}); 

var tabs = new Ext.TabPanel({ 
    renderTo: 'tabs', 
    width: 500, 
    forceLayout: true, 
    activeTab: 0, 
    //deferredRender: false, 
    height: 300, 
    defaults: { 
     autoHeight: true 
    }, 
    items: [{ 
     contentEl: 'tab1', 
     title: 'Tab1' 
    }, { 
     //contentEl: 'tab2', 
     title: 'Tab2', 
     items: [form] 
    }] 
});