A Sencha ExtJS form panel (Ext.form.Panel) example, using an hbox layout (and a checkboxgroup)

Here’s a Sencha ExtJS form panel (Ext.form.Panel) example, using an hbox layout:

var formPanel = Ext.create('Ext.form.Panel', {
    title: 'Support Ticket Request',
    width: 650,
    height: 500,
    renderTo: Ext.getBody(),
    style: 'margin: 50px',
    items: [{
        xtype: 'container',
        layout: 'hbox',
        items: [{
            xtype: 'textfield',
            fieldLabel: 'First Name', 
            name: 'FirstName',
            labelAlign: 'top',
            cls: 'field-margin',
            flex: 1
        }, {
            xtype: 'textfield',
            fieldLabel: 'Last Name',  
            name: 'LastName',
            labelAlign: 'top',
            cls: 'field-margin',
            flex: 1
        }]
    }]
});

It also shows how to add a CSS class, and use the flex property with the hbox layout.

This other code on the same page shows how to use a checkboxgroup:

items: [
// ...
{
    xtype: 'container',
    layout: 'hbox',
    items: [{
        xtype: 'textarea',
        fieldLabel: 'Request Details',  
        name: 'RequestDetails',
        labelAlign: 'top',
        cls: 'field-margin',
        height: 250,
        flex: 2
    }, {
        xtype: 'checkboxgroup',
        name: 'RequestType',
        fieldLabel: 'Request Type',
        labelAlign: 'top',
        columns: 1,
        cls: 'field-margin',
        vertical: true,
        items: [{
            boxLabel: 'Type 1',
            name: 'type1',
            inputValue: '1'
        }, {
            boxLabel: 'Type 2',
            name: 'type2',
            inputValue: '2'
        }, {

        // more here ...

            boxLabel: 'Type 5',
            name: 'type5',
            inputValue: '5'
        }, {

            boxLabel: 'Type 6',
            name: 'type6',
            inputValue: '6'
        }],
        flex: 1
    }]
}
// ...
]