这是用来创建一个表单的布局,负责渲染和其部件内的子元件。渲染出来的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' }] });