Ext JS 4 - laying out fields in a form using hbox, vbox, etc

Question

I have a simple Ext JS 4 form inside a window (MVC style app). The example below shows 4 fields. This example is simplified, but now I need to take these fields and lay them out using hbox and vbox (and possibly others?)

How would I for example, take the first two fields and put the in a hbox at the top of the form so they display horizontally, at the top of the form, then take the rest of the fields and put them in a vbox below that hbox so they display vertically?

(my actual form has a lot more fields and I will have various other hbox/vboxes, but I am just looking to get started):

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

   }

I have looked at various examples of layout sencha page , sencha docs, and finally another one -- this last one has something that looks close - in the form tree, fieldsets in 2 columns, it shows a form with items[] and inside there some layout code, and I was able to get that to partially work, but was not able to convert it to an hbox/vbox style layout. When I set it to hbox, there is no height to the hbox, so I can not see the fields.

Answer 1

Here is example:

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

If you want to displays blocks in form from up to down, you don't need to change layout. I've wrapped only 2 first display fields into panel with hbox layout (because you want to split only first row).

Answer 2

You can't mix two layouts in a single panel. So, you have to use sub-panels to lay-out the fields according to various rules. These sub-panels don't need (and shouldn't) be form panels, just normal panels with form layout (so you will get field labels). I routinely did something similar to achieve column-like layout for the form fields (which isn't very well supported by extjs): so the top form panel had a vbox layout, then there were some sub-panels with hbox layout and sub-sub-panels (or fieldsets) with form layout that contained the fields. Column layout could also be helpful in some cases.

PS the last example you mention (2 columns with fieldsets) is actually a form panel with column layout containing two fieldsets (subpanels) with form layout. So it's structured similar to what I've described above.