EXT JS 4 - Поля изкладывания в форме с использованием Hbox, Vbox и т. Д.

Question

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

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

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

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#'
                }
                     }
     ]

   }

Я посмотрел на различные примеры макета Sencha Page , Sencha Docs, и наконец Еще один - У этого последнего есть что -то, что выглядит близко - в дереве форм, наборы в 2 столбцах, в нем показана форма с элементами [], а внутри некоторый код макета, и я смог привлечь это к частично работать, но не был Способен конвертировать его в макет стиля 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

Вы не можете смешать два макета на одной панели. Таким образом, вы должны использовать подпанели для выбора поля в соответствии с различными правилами. Эти подпанели не нужны (и не должны) быть панелями формы, просто нормальные панели с макетом формы (так что вы получите меток поля). Я регулярно делал что-то похожее на достижение столбца, подобное, для полей формы (что не очень хорошо поддерживается EXTJ): поэтому у панели верхней формы была расположение Vbox, затем были некоторые подпанели с макетом Hbox и Sub- Подпанели (или поля) с макетом формы, в которой содержались поля. Макет колонны также может быть полезен в некоторых случаях.

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