如何在另一个Ext.Panel中将两个Ext.Panel放在彼此的左右两边？

Question

我正在尝试在ExtJS中创建一个布局，它在顶部和左下角和左下角有一个网格，一个基本的父/子，主/细节布局：

wrapper_panel
panel_top
  [grid]
panel_bottom
  [left_area     right_area]

然而，panel_bottom中的两个区域相互叠加而不是左右区域

var left_area = new Ext.Panel({
    region: 'west',
    layout: 'fit',
    width: 100,
    items: []
});

var right_area = new Ext.Panel({
    region: 'center',
    layout: 'fit',
    width: 100,
    items: []
});


var panel_bottom = new Ext.Panel({
    //layout: 'border',
    region: 'south',
    items: [ left_area, right_area ]
})

看起来像这样：

如果我制作panel_bottom layout: border，则左右区域会完全消失。

我需要在底部区域面板中进行哪些更改才能使它们左右对齐？

附录

@vimvds，如果我添加width: 200或者例如width: 300，我得到了这个：

感谢您的回答，它让我废弃了这个并改为使用table布局，这导致了另一个问题how to define percentage instead of absolute values for height/width。

Answer 1

我使用Ext.layout.HBoxLayout：

var panel_bottom = new Ext.Panel({
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [ left_area, right_area ],
});

或者您也可以使用Ext.layout.TableLayout或Ext.layout.ColumnLayout：

var panel_bottom = new Ext.Panel({
    layout: 'column',
    defaults: {
        columnWidth: 0.5
    },
    items: [ left_area, right_area ],
});

Answer 2

如果你使用会发生什么：

var panel_bottom = new Ext.Panel({
    layout: 'border',
    items: [ left_area, right_area ],
    width: 200
});