| Defined In: | FormLayout.js |
| Class: | Ext.layout.FormLayout |
| Extends: | Ext.layout.AnchorLayout |
这是用来创建一个表单的布局。 该类可以被继承或通过配置项 layout:'form' Ext.Container#layout 来创建, 而不像通常情况下使用关键字 new 来创建。可是,在应用中,一般我们会选择使用 Ext.form.FormPanel (自动使用 FormLayout 作为布局类),而且它还提供了内建的读取、效验和提交表单的函数。
需要注意的是,当通过配置项来创建布局的时候,布局的属性必须通过 Ext.Container#layoutConfig 对象来指定。使用 FormLayout 布局的容器,也支持以下配置属性:
任意类型的组件都能被添加到 FormLayout 中,但是继承自 Ext.form.Field 的项还支持下列配置项属性:
// 如果要显示效验信息则必需
Ext.QuickTips.init();
// 虽然你也可以创建一个包含 layout:'form' 的 Panel,但是我们建议使用 FormPanel 来代替,因为它自带 FormLayout 布局。
var form = new Ext.form.FormPanel({
labelWidth: 75,
title: 'Form Layout',
bodyStyle:'padding:15px',
width: 350,
labelPad: 10,
defaultType: 'textfield',
defaults: {
// 应用于每个被包含的项
width: 230,
msgTarget: 'side'
},
layoutConfig: {
// 这里是布局配置项
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'
}]
});
| 配置项 | 定义者 | |
|---|---|---|
|
labelStyle
: String
一个 CSS 样式字串用于此布局中的所有字段的标签上(默认为 '')。
一个 CSS 样式字串用于此布局中的所有字段的标签上(默认为 '')。
|
FormLayout | |
|
elementStyle
: String
一个 CSS 样式字串用于此布局中的所有字段元素上(默认为 '')。
一个 CSS 样式字串用于此布局中的所有字段元素上(默认为 '')。
|
FormLayout | |
|
labelSeparator
: String
每个表格标签之后显示的文本分隔符(默认为 ':')。要关闭此布局中的所...
每个表格标签之后显示的文本分隔符(默认为 ':')。要关闭此布局中的所有字段的分隔符,可以设置该字串为 '' (如果在字段的设置里面指定了分隔符,仍然会被显示)。
|
FormLayout | |
|
CSS
: String
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容...
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容器或容器的子节点加入标准CSS规则提供了方便。
|
ContainerLayout | |
|
renderHidden
: Boolean
True表示为在渲染时隐藏包含的每一项(缺省为false)。
True表示为在渲染时隐藏包含的每一项(缺省为false)。
|
ContainerLayout | |
| 属性 | 定义者 | |
|---|---|---|
|
activeItem: activeItem
一个已激活Ext.Component的引用 例如,if(myPane...
一个已激活Ext.Component的引用 例如,if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。(像Ext.layout.Accordion, Ext.layout.CardLayout和Ext.layout.FitLayout)。只读的。 Related to Ext.Container#activeItem.
|
ContainerLayout | |
| 方法 | 定义者 | |
|---|---|---|