如何在另一个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布局，这使我想到另一个问题，即如何定义百分比而不是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 ],
});