Ext.layout.FormLayout

这是用来创建一个表单的布局，负责渲染和其部件内的子元件。渲染出来的Field是能够支持HTML label元素的用户体验设计。
This layout manager is specifically designed for rendering and managing child Components of forms. It is responsible for rendering the labels of s.

此类可以被继承或通过配置项layout:'form'Ext.Containerlayout来创建，而不像通常情况下使用关键字new来创建。可是在应用中，一般我们会选择使用Ext.form.FormPanel（自动使用FormLayout作为布局类），而且它还提供了内建的读取、效验和提交表单的函数。
This layout manager is used when a Container is configured with the layout:'form' layout config, and should generally not need to be created directly via the new keyword. In an application, it will usually be preferrable to use a FormPanel (which automatically uses FormLayout as its layout class) since it also provides built-in functionality for loading, validating and submitting the form.

需要注意的是，当通过配置项来创建布局的时候，布局的属性必须通过Ext.ContainerlayoutConfig对象来指定。
Note that when creating a layout via config, the layout-specific config properties must be passed in via the layoutConfig object which will then be applied internally to the layout.

使用Container布局的容器，也支持以下配置属性： The Container using the FormLayout can also accept the following layout-specific config properties:

• hideLabels: (Boolean)

  值为true则隐藏字段的标签（默认为 false）。True to hide field labels by default (defaults to false)

• labelAlign: (String)

  添加到每个字段标签和字段元素之外的封装 DIV 之上的 CSS 类（默认类为 'x-form-item' 并且 itemCls 会附加在其后）。The default label alignment. The default value is empty string '' for left alignment, but specifying 'top' will align the labels above the fields.

• labelPad: (Number)

  默认的以像素表示的字段标签的padding值（默认为5）。只有在指定了labelWidth的时候labelPad有效，否则被忽略。The default padding in pixels for field labels (defaults to 5). labelPad only applies if labelWidth is also specified, otherwise it will be ignored.

• labelWidth: (Number)

  默认的以像素表示的字段标签的宽度（默认为100）。The default width in pixels of field labels (defaults to 100)

任意类型的组件都能被添加到FormLayout中，但是继承自Ext.form.Field的项还支持下列配置项属性：
Any type of components can be added to a FormLayout, but items that inherit from Ext.form.Field can also supply the following field-specific config properties:

• clearCls: (String)

  添加到每个表单字段封装DIV的上用于实现clear效果的CSS类（默认为'x-form-clear-left'）。
  The CSS class to apply to the special clearing div rendered directly after each form field wrapper (defaults to 'x-form-clear-left')

• fieldLabel: (String)

  显示的字段标签（label）文本（默认为''）。
  The text to display as the label for this field (defaults to '')

• hideLabel: (Boolean)

  值为true则隐藏字段的标签和分隔符（默认为 false）。
  True to hide the label and separator for this field (defaults to false).

• itemCls: (String)

  添加到每个字段标签和字段元素之外的封装DIV之上的CSS样式类（默认类为'x-form-item'，并且itemCls会附加在其后）。如果提供了，则字段级的itemCls将会覆盖容器级的。
  A CSS class to add to the 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.

• labelSeparator: (String)

  每个表格标签之后显示的文本分隔符（默认为':'或者labelSeparator指定的值）。要隐藏分隔符则设置为 ''。
  The separator to display after the text of the label for this field (defaults to a colon ':' or the layout's value for labelSeparator). To hide the separator use empty string ''.

• labelStyle: (String)

  一个 CSS 样式字串用于此布局中的所有字段的标签上（默认为''或者labelStyle指定的值）。
  A CSS style specification string to add to the field label for this field (defaults to '' or the layout's value for labelStyle).

使用示例：Example usage: 


// 如果要显示效验信息则必需 Required if showing validation messages
Ext.QuickTips.init();


// 虽然你也可以创建一个包含 layout:'form' 的 Panel，但是我们建议使用 FormPanel 来代替，因为它自带 FormLayout 布局。// 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({
    labelWidth: 75,
    title: 'Form Layout',
    bodyStyle:'padding:15px',
    width: 350,
    labelPad: 10,
    defaultType: 'textfield',
    defaults: {
        // 应用于每个被包含的项 applied to each contained item
        width: 230,
        msgTarget: 'side'
    },
    layoutConfig: {
        // 这里是布局配置项 layout-specific configs go here
        labelSeparator: ''
    },
    items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            name: 'last'
        },{
            fieldLabel: 'Company',
            name: 'company'
        },{
            fieldLabel: 'Email',
            name: 'email',
            vtype:'email'
        }
    ],
    buttons: [{
        text: 'Save'
    },{
        text: 'Cancel'
    }]
});