Properties Methods Events Config Options Direct Link
ContainerLayout
  AnchorLayout
    FormLayout

Class Ext.layout.FormLayout

Package:Ext.layout
Defined In:FormLayout.js
Class:FormLayout
Extends:AnchorLayout

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
});

Config Options

Config OptionsDefined By
 labelSeparator : String
See Ext.form.FormPanel.labelSeparator. Configuration of this property at the container level takes precedence.
FormLayout
 renderHidden : Boolean
True to hide each contained item on render (defaults to false).
ContainerLayout

Public Properties

PropertyDefined By

Public Methods

MethodDefined By

Public Events

This class has no public events.