Ext JS 4 - расположение полей в форме с использованием hbox, vbox и т. Д.

Question

У меня есть простая форма Ext JS 4 внутри окна (приложение в стиле MVC). Пример ниже показывает 4 поля. Этот пример упрощен, но теперь мне нужно взять эти поля и выложить их, используя hbox и vbox (и, возможно, другие?)

Как бы я, например, взял первые два поля и поместил их в hbox в верхней части формы, чтобы они отображались горизонтально, в верхней части формы, затем возьмите остальные поля и поместите их в vbox ниже этого hbox, чтобы они отображались вертикально?

(моя фактическая форма имеет намного больше полей, и у меня будут различные другие hbox / vboxes, но я просто хочу начать):

Ext.define('ESDB.view.encounter.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.encounteredit',
    title : 'Edit Encounter',
    layout: 'fit',
    width: 700,
    autoShow: true,

    initComponent: function() {
        this.items = [

        {
            xtype: 'form',
            items: [
                {
                xtype: 'displayfield',
                name: 'id',
                fieldLabel: 'ID'
                },
                {
                    xtype: 'displayfield',
                    name: 'cid',
                    fieldLabel: 'cid#'
                },
                {
                    xtype: 'displayfield',
                    name: 'addedDate',
                    fieldLabel: 'Added'
                },
                {
                    xtype: 'displayfield',
                    name: 'clientID',
                    fieldLabel: 'Client#'
                }
                     }
     ]

   }

Я посмотрел на различные примеры макета страница сенчи , документы сенчи и, наконец, еще один - у этого последнего есть что-то, что выглядит близко - в дереве форм, fieldsets в 2 столбцах, он показывает форму с items [], а внутри - некоторый код макета, и я смог заставить его работать частично, но не смог преобразовать его в макет в стиле hbox / vbox , Когда я установил его на hbox, высота для hbox отсутствует, поэтому я не вижу полей.

Answer 1

Вот пример:

Ext.define('ESDB.view.encounter.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.encounteredit',
    title : 'Edit Encounter',
    layout: 'fit',
    width: 700,
    autoShow: true,

    items: [{
        xtype: 'form',
        items: [
            {
                xtype: 'panel',
                border: false,
                layout: 'hbox',
                items: [
                    {
                        xtype: 'displayfield',
                        name: 'id',
                        fieldLabel: 'ID',
                        flex: 0.5
                    },
                    {
                        xtype: 'displayfield',
                        name: 'cid',
                        fieldLabel: 'cid#',
                        flex: 0.5
                    }
                ]
            },
            {
                xtype: 'displayfield',
                name: 'addedDate',
                fieldLabel: 'Added'
            },
            {
                xtype: 'displayfield',
                name: 'clientID',
                fieldLabel: 'Client#'
            }
        ]
    }]
});

Если вы хотите отображать блоки в форме сверху вниз, вам не нужно менять макет.Я обернул только 2 первых поля отображения в панель с макетом hbox (потому что вы хотите разделить только первый ряд).

Answer 2

Вы не можете смешивать два макета на одной панели.Таким образом, вы должны использовать подпанели для разметки полей в соответствии с различными правилами.Эти подпанели не должны (и не должны) быть панелями форм, просто обычными панелями с разметкой формы (поэтому вы получите метки полей).Я обычно делал что-то похожее, чтобы получить похожий на столбец макет для полей формы (что не очень хорошо поддерживается extjs): так что верхняя панель формы имела макет vbox, затем были некоторые подпанели с макетом hbox и вложенными элементами.подпанели (или наборы полей) с макетом формы, содержащей поля.Макет столбца также может быть полезен в некоторых случаях.

PS Последний пример, который вы упомянули (2 столбца с наборами полей), на самом деле представляет собой панель формы с макетом столбца, содержащим два набора полей (подпанели) с макетом формы.Так что он структурирован так, как я описал выше.