В ExtJS, как разместить два набора полей рядом на панели с макетом hbox?

Question

В ExtJS у меня возникли небольшие проблемы при размещении двух наборов полей рядом на панели с макетом hbox. Макет hbox, похоже, не знает о высоте набора полей и обрезает ее, даже если я явно установил высоту панели на что-то большое.

Вот как это выглядит:

Синяя рамка - это панель hbox, внутри которой есть 2 набора полей: «Информация о клиенте» и «Информация о владельце». Код такой (упрощенный и запускаемый в Firebug):

var clientInfo = {
    xtype: 'fieldset',
    defaultType: 'textfield',
    title: 'Client Info',
    items:
    [
        { fieldLabel: 'First Name' },
        { fieldLabel: 'Last Name' },
        { fieldLabel: 'Cell Phone #' },
        { fieldLabel: 'Work Phone #' }
    ]
};

var ownerInfo = {
    xtype: 'fieldset',
    defaultType: 'textfield',
    title: 'Owner Info',
    items:
    [
        { fieldLabel: 'First Name' },
        { fieldLabel: 'Last Name' },
        { fieldLabel: 'Cell Phone #' },
        { fieldLabel: 'Work Phone #' }
    ]
};

new Ext.Panel({
    layout: 'hbox',
    frame: true,
    height: 400,
    width: 800,
    defaults: { flex: 1 },
    items: [ clientInfo, ownerInfo ]
}).render(document.body);

P.S. Если вы удалите defaults: { flex: 1 }, наборы полей будут отображаться правильно, но не будут автоматически изменять размер для соответствия размеру контейнера, что мне и нужно.

Кто-нибудь знает, как исправить эту проблему рендеринга? Благодаря.

Answer 1

Вы пробовали layoutConfig: {align: 'stretch'} на панели вместе с autoHeight: true в наборах полей?

У меня работает на ExtJS 3.1.0

Answer 2

У меня было много проблем с vbox и hbox, пока я не начал явно устанавливать три основных параметра layoutConfig:

layoutConfig: {
   flex: 1,
   align: 'stretch',
   pack: 'start'
}

Из прочтения их API это звучало так, как будто указание значения 'flex' в layoutConfig было похоже на значение по умолчанию, но, поскольку его установка и мои макеты работают правильно, я пришел к выводу, что это обязательное поле, для которого дети значения flex в какой-то момент сравниваются с / с.

Хотя это всего лишь предположение с моей стороны - все, что меня действительно волновало, это то, что использование этого исправило мою раскладку хе.

Answer 3

Попробуйте autoHeight: true в ваших полях.

Другой альтернативой может быть расположение столбцов, где каждому столбцу присваивается 50% доступной ширины.

Answer 4

Если вы хотите, чтобы ваш макет растягивался, вам нужно использовать следующее:

layout: {
   type: 'vbox',
   align: 'stretch'
}