Как разместить две Ext.Panels слева и справа друг от друга в другой 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, что привело меня к другому вопросу , как определить процент вместо абсолютных значений для высоты / ширины .

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