在 ExtJS 4.x 中折叠边框布局中的面板时的错误

Question

我对可折叠面板有问题，该面板是 ExtJS 4.2.2 中具有边框布局的面板的项目。基本上是以下结构：

Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
    height: 400,
    width: 600,
    title: 'TestPanel',
    renderTo: Ext.getBody(),
  items: [
    { xtype: 'toolbar', items: [{xtype: 'button', text: 'test1'}, {xtype: 'button', text: 'test2'}, {xtype: 'button', text: 'test3'}]},
    {
        xtype: 'panel',
      items: [
             { xtype: 'toolbar', items: [{xtype: 'button', text: 'another1'}, {xtype: 'button', text: 'another2'}, {xtype: 'button', text: 'another3'}]},
        {
          xtype: 'panel',
          layout: 'border',
          height: 600,
          width: 200,
          items: [
            {xtype: 'panel', title: 'options', html: 'lalalalalalalalalala', region: 'west', width: 100, height: 100, collapsible: true, collapsed: true},
            {xtype: 'panel', html: 'lalalalalalalalalala', region: 'center', width: 100, height: 100}
            ]
        }
        ]
    }
    ]
});  
});

这是相应的小提琴：http://jsfiddle.net/jLugR/

当您取消折叠选项面板时，一切正常。再次折叠它时，它会破坏布局。您知道问题是什么以及我该如何处理吗？

Answer 1

看起来子面板的（边框布局）高度大于父面板的高度。确保所有子元素的高度加起来不超过父元素的高度。通过将边框布局面板的高度更改为 250 来检查小提琴，它可以工作。