Class Ext.layout.FormLayout

This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of Fields.

This layout manager is used when a Container is configured with the layout:'form' layout config option, and should generally not need to be created directly via the new keyword. See Ext.Container.layout for additional details.

In an application, it will usually be preferrable to use a FormPanel (which is configured with FormLayout as its layout class by default) since it also provides built-in functionality for loading, validating and submitting the form.

A Container using the FormLayout layout manager (e.g. Ext.form.FormPanel or specifying layout:'form') can also accept the following layout-specific config properties:

Any Component (including Fields) managed by FormLayout accepts the following as a config option:

Any Component managed by FormLayout may be rendered as a form field (with an associated label) by configuring it with a non-null fieldLabel. Components configured in this way may be configured with the following options which affect the way the FormLayout renders them:

Example usage:

// Required if showing validation messages
Ext.QuickTips.init();

// While you can create a basic Panel with layout:'form', practically
// you should usually use a FormPanel to also get its form functionality
// since it already creates a FormLayout internally.
var form = new Ext.form.FormPanel({
    title: 'Form Layout',
    bodyStyle: 'padding:15px',
    width: 350,
    defaultType: 'textfield',
    defaults: {
        // applied to each contained item
        width: 230,
        msgTarget: 'side'
    },
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false,
            labelSeparator: ':' // override labelSeparator layout config
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }, {
            xtype: 'textarea',
            hideLabel: true,     // override hideLabels layout config
            name: 'msg',
            anchor: '100% -53'
        }
    ],
    buttons: [
        {text: 'Save'},
        {text: 'Cancel'}
    ],
    layoutConfig: {
        labelSeparator: '~' // superseded by assignment below
    },
    // config options applicable to container when layout='form':
    hideLabels: false,
    labelAlign: 'left',   // or 'right' or 'top'
    labelSeparator: '>>', // takes precedence over layoutConfig value
    labelWidth: 65,       // defaults to 100
    labelPad: 8           // defaults to 5, must specify labelWidth to be honored
});