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