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来检查小提琴，它可以工作..

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

1 个答案: