The source code

    /**
     * @class Ext.layout.FormLayout
     * @extends Ext.layout.AnchorLayout
     * This layout manager is specifically designed for rendering and managing child Components of
     * {@link Ext.form.FormPanel forms}. It is responsible for rendering the labels of
     * {@link Ext.form.Field Field}s.
     *
     * This layout manager is used when a Container is configured with the layout:'form'
     * {@link Ext.Container#layout layout} config option, and should generally not need to be created directly
     * via the new keyword. See {@link Ext.Container#layout} for additional details.
     *
     * In an application, it will usually be preferrable to use a {@link Ext.form.FormPanel FormPanel}
     * (which is configured with FormLayout as its layout class by default) since it also provides built-in
     * functionality for {@link Ext.form.BasicForm#doAction loading, validating and submitting} the form.
     *
     * A {@link Ext.Container Container} using the FormLayout layout manager (e.g.
     * {@link Ext.form.FormPanel} or specifying layout:'form') can also accept the following
     * layout-specific config properties:
     * {@link Ext.form.FormPanel#hideLabels hideLabels}
     * {@link Ext.form.FormPanel#labelAlign labelAlign}
     * {@link Ext.form.FormPanel#labelPad labelPad}
     * {@link Ext.form.FormPanel#labelSeparator labelSeparator}
     * {@link Ext.form.FormPanel#labelWidth labelWidth}
     *
     *
     * Any Component (including Fields) managed by FormLayout accepts the following as a config option:
     *
     * {@link Ext.Component#anchor anchor}
     *
     *
     * Any Component managed by FormLayout may be rendered as a form field (with an associated label) by
     * configuring it with a non-null {@link Ext.Component#fieldLabel fieldLabel}. Components configured
     * in this way may be configured with the following options which affect the way the FormLayout renders them:
     *
     * {@link Ext.Component#clearCls clearCls}
     * {@link Ext.Component#fieldLabel fieldLabel}
     * {@link Ext.Component#hideLabel hideLabel}
     * {@link Ext.Component#itemCls itemCls}
     * {@link Ext.Component#labelSeparator labelSeparator}
     * {@link Ext.Component#labelStyle labelStyle}
     *
     *
     * 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,
                {@link Ext.Component#labelSeparator 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: {
            {@link #labelSeparator}: '~' // superseded by assignment below
        },
        // config options applicable to container when layout='form':
        hideLabels: false,
        labelAlign: 'left',   // or 'right' or 'top'
        {@link Ext.form.FormPanel#labelSeparator labelSeparator}: '>>', // takes precedence over layoutConfig value
        labelWidth: 65,       // defaults to 100
        labelPad: 8           // defaults to 5, must specify labelWidth to be honored
    });

     */
    Ext.layout.FormLayout = Ext.extend(Ext.layout.AnchorLayout, {

        /**
         * @cfg {String} labelSeparator
         * See {@link Ext.form.FormPanel}.{@link Ext.form.FormPanel#labelSeparator labelSeparator}.  Configuration
         * of this property at the container level takes precedence.
         */
        labelSeparator : ':',

        /**
         * Read only. The CSS style specification string added to field labels in this layout if not
         * otherwise {@link Ext.Component#labelStyle specified by each contained field}.
         * @type String
         * @property labelStyle
         */

        // private
        setContainer : function(ct){
            Ext.layout.FormLayout.superclass.setContainer.call(this, ct);
            if(ct.labelAlign){
                ct.addClass('x-form-label-'+ct.labelAlign);
            }

            if(ct.hideLabels){
                this.labelStyle = "display:none";
                this.elementStyle = "padding-left:0;";
                this.labelAdjust = 0;
            }else{
                this.labelSeparator = ct.labelSeparator || this.labelSeparator;
                ct.labelWidth = ct.labelWidth || 100;
                if(typeof ct.labelWidth == 'number'){
                    var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
                    this.labelAdjust = ct.labelWidth+pad;
                    this.labelStyle = "width:"+ct.labelWidth+"px;";
                    this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
                }
                if(ct.labelAlign == 'top'){
                    this.labelStyle = "width:auto;";
                    this.labelAdjust = 0;
                    this.elementStyle = "padding-left:0;";
                }
            }
        },

        //private
        getLabelStyle: function(s){
            var ls = '', items = [this.labelStyle, s];
            for (var i = 0, len = items.length; i < len; ++i){
                if (items[i]){
                    ls += items[i];
                    if (ls.substr(-1, 1) != ';'){
                        ls += ';'
                    }
                }
            }
            return ls;
        },

        /**
         * @cfg {Ext.Template} fieldTpl
         * A {@link Ext.Template#compile compile}d {@link Ext.Template} for rendering
         * the fully wrapped, labeled and styled form Field. Defaults to:
    new Ext.Template(
        '<div class="x-form-item {itemCls}" tabIndex="-1">',
            '<label for="{id}" style="{labelStyle}" class="x-form-item-label">{label}{labelSeparator}</label>',
            '<div class="x-form-element" id="x-form-el-{id}" style="{elementStyle}">',
            '</div><div class="{clearCls}"></div>',
        '</div>'
    );

         * This may be specified to produce a different DOM structure when rendering form Fields.
         * A description of the properties within the template follows:
         * itemCls : StringThe CSS class applied to the outermost div wrapper
         * that contains this field label and field element (the default class is 'x-form-item' and itemCls
         * will be added to that). If supplied, itemCls at the field level will override the default itemCls
         * supplied at the container level.
         * id : StringThe id of the Field
         * {@link #labelStyle} : String
         * A CSS style specification string to add to the field label for this field (defaults to '' or the
         * {@link #labelStyle layout's value for labelStyle}).
         * label : StringThe text to display as the label for this
         * field (defaults to '')
         * {@link #labelSeparator} : StringThe separator to display after
         * the text of the label for this field (defaults to a colon ':' or the
         * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
         * elementStyle : StringThe styles text for the input element's wrapper.
         * clearCls : StringThe CSS class to apply to the special clearing div
         * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
         *
         * Also see {@link #getTemplateArgs}
         */

        // private
        renderItem : function(c, position, target){
            if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
                var args = this.getTemplateArgs(c);
                if(typeof position == 'number'){
                    position = target.dom.childNodes[position] || null;
                }
                if(position){
                    this.fieldTpl.insertBefore(position, args);
                }else{
                    this.fieldTpl.append(target, args);
                }
                c.render('x-form-el-'+c.id);
            }else {
                Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
            }
        },

        /**
         * Provides template arguments for rendering the fully wrapped, labeled and styled form Field.
         * This method returns an object hash containing properties used by the layout's {@link #fieldTpl}
         * to create a correctly wrapped, labeled and styled form Field. This may be overriden to
         * create custom layouts. The properties which must be returned are:
         * itemCls : StringThe CSS class applied to the outermost div wrapper
         * that contains this field label and field element (the default class is 'x-form-item' and itemCls
         * will be added to that). If supplied, itemCls at the field level will override the default itemCls
         * supplied at the container level.
         * id : StringThe id of the Field
         * {@link #labelStyle} : String
         * A CSS style specification string to add to the field label for this field (defaults to '' or the
         * {@link #labelStyle layout's value for labelStyle}).
         * label : StringThe text to display as the label for this
         * field (defaults to '')
         * {@link #labelSeparator} : StringThe separator to display after
         * the text of the label for this field (defaults to a colon ':' or the
         * {@link #labelSeparator layout's value for labelSeparator}). To hide the separator use empty string ''.
         * elementStyle : StringThe styles text for the input element's wrapper.
         * clearCls : StringThe CSS class to apply to the special clearing div
         * rendered directly after each form field wrapper (defaults to 'x-form-clear-left')
         *
         * @param field The {@link Field Ext.form.Field} being rendered.
         * @return An object hash containing the properties required to render the Field.
         */
        getTemplateArgs: function(field) {
            var noLabelSep = !field.fieldLabel || field.hideLabel;
            return {
                id: field.id,
                label: field.fieldLabel,
                labelStyle: field.labelStyle||this.labelStyle||'',
                elementStyle: this.elementStyle||'',
                labelSeparator: noLabelSep ? '' : (typeof field.labelSeparator == 'undefined' ? this.labelSeparator : field.labelSeparator),
                itemCls: (field.itemCls||this.container.itemCls||'') + (field.hideLabel ? ' x-hide-label' : ''),
                clearCls: field.clearCls || 'x-form-clear-left'
            };
        },

        // private
        adjustWidthAnchor : function(value, comp){
            return value - (comp.isFormField || comp.fieldLabel  ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
        },

        // private
        isValidParent : function(c, target){
            return true;
        }

        /**
         * @property activeItem
         * @hide
         */
    });

    Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;