构建 DynamicForm 类的新实例。
| 全称 | mx.datacontrols.DynamicForm |
| 命名空间 | mx.datacontrols |
| 类 | DynamicForm |
| 继承层次结构 | DynamicFormContainerControl |
| 源文件 | ~\mx\scripts\datacontrols\DynamicForm.js |
动态表单，支持生成的容器包括
mx.containers.TabControl
mx.containers.Accordion
mx.containers.HSplit
mx.containers.VSplit
mx.containers.DockPanel
当验证表单输入时将触发该事件。调用 validate 方法时会触发该事件。可通过订购该事件，实现对表单的自定义验证。
示例 1
下面是一段创建用户的 Form 代码，除需进行必填字段校验外，还需校验两次密码输入是否一致，这时需要订购
onvalidate 事件进行自定义验证的开发:
| JavaScript 代码 |
var entityContainer = new mx.datacontainers.FormEntityContainer(
{type:"local"}
);
var form = new mx.datacontrols.DynamicForm({
entityContainer: entityContainer,
width:"500px",
height:"400px",
fields:[
{
ctype: 'HSplit',
rows: "30%,60%",
controls: [
{
ctype: 'VSplit',
cols: "50%,50%",
index: 0,
controls: [
{
{
ctype: 'TextEditor',
fieldOptions:{},
name: 'id2',
caption:"id2",
top:'10px',
index:0
}
},
{
ctype: 'TextEditor',
name: 'id3',
caption:"id3",
index:0
},
{
ctype: 'TextEditor',
name: 'id4',
caption:"id4",
index:1
},
{
ctype: 'TextEditor',
name: 'id5',
caption:"id5",
index:1
},
]
},
{
ctype: 'TabControl',
index: 1,
controls: [
{
text: "选项卡1",
name: 'tab1',
controls: [
{
ctype: 'mx.editors.TextEditor',
name: 'asdfadsf',
caption:"标题"
},
{
name:"hahahah",
caption:"标题1",
ctype:"mx.editors.CheckListEditor",
editorOptions:{type : "radio"},
items:[
{text: "变电站1", value: "xx-001"},
{text: "变电站2", value: "xx-002"},
{text: "变电站3", value: "xx-003"}]
}
]
},
{
text: "选项卡2",
name: 'tab2',
controls: [
{
ctype: 'mx.editors.TextEditor',
name: 'nameddd'
}
]
}
]
}
]
}
]
});
form.load();
form.on("validate", function(e)
{
var entityContainer = form.entityContainer;
if (entityContainer.getValue("password") != entityContainer.getValue("confirmPassword"))
{
// 通过事件参数传递校验结果
e.successful = false;
e.hint = "两次输入的密码不一致。";
}
}); |
构造函数
| 名称 | 说明 |
| DynamicForm() | 构建 DynamicForm 类的新实例。 |
初始化函数
| 名称 | 说明 |
| init() | 初始化方法。执行设置样式并初始化属性等操作。 |
方法
字段
| 名称 | 说明 |
| alias | 获取或设置一个字符串，表示控件的别名。 |
| baseUrl | 详见 DataGrid.baseUrl 属性。 |
| border | 获取控件的边框样式。如“1px solid red”，表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
| bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
| captionPosition | |
| contextMenu | 获取或设置容器的上下文菜单。 |
| controls | 获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControl 和 removeControl 方法向集合中添加或移除控件。 |
| cssClass | 指定css伪类名称，设置控件显示样式 |
| display | 获取控件的显示样式值。如“none”，表示隐藏控件； “block”表示强制作为块对象呈递。请使用 setDisplay。注：该"block"值不能在ComplexGrid控件中使用。 方法设置该字段的值。 |
| editors | 获取一个集合，包含表单中所有的编辑器（Editor 类型）。 |
| enabled | 获取控件是否可以对用户交互作出响应。如果该值为 true，则表示控件可以对用户交互作出响应；反之则不能。 请使用 setEnabled 方法设置该字段的值。 |
| entityContainer | 获取一个 FormEntityContainer 对象（通常是 FormEntityContainer 类型），表示表单的数据源。 请使用 setEntityContainer 方法设置该字段的值。 |
| eTag | 获取控件的标签。 |
| fields | 表单的所有的fields |
| height | 获取容器的高度。可以是数字（如 500）、字符串（如“500px”或“50%”）。 |
| isbuild | 指示表单是否已构建 |
| layout | 获取和设置一个容器控件的布局器。详见 LayoutFactoryClass.createLayout 方法的 p_layout参数。 |
| layoutConfigs | 获取或者设置一个 JSON 对象，该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
| layoutOptions | 获取和设置布局参数，该属性是一个 JSON 对象。 |
| left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
| padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2 像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
| parent | 获取控件所属的父对象。 |
| permissionID | 获取或设置一个字符串，表示控件的权限标识。 |
| position | 详见 Control.position 属性。 |
| primaryKey | 数据对象主键属性名，默认为id。 |
| right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
| top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
| visible | 获取一个 Boolean 值，表示控件是否可见。如果该值为 true，则表示控件可见；反之则不可见。请使用 setVisible 方法设置该字段的值。 |
| width | 获取容器的宽度。可以是数字（如 500）、字符串（如“500px”或“50%”）。 |
| $container | 获取容器控件中用来包含控件 DOM 元素的占位符。 |
| $e | 获取该控件的占位符，该占位符为一个 JQuery 对象。 |
事件
| 名称 | 说明 |
| onctrladded | 当添加控件到容器后，将触发该事件。 |
| onctrlremoved | 当从容器移除控件后，将触发该事件。 |
| onload | 当表单加载完数据后触发该事件。 |
| onloading | 当数据容器开始加载数据时，将触发该事件。调用 load 方法时会触发该事件。 |
| onrendering | 加载数据之后，表单渲染之前将触发该事件。 |
| onsubmit | 当表单提交是触发该事件。 |
onvalidate |
当验证表单输入时将触发该事件。调用 validate 方法时会触发该事件。可通过订购该事件，实现对表单的自定义验证。 |
方法详细信息
addControl(p_control, p_islinebreak) 方法
append($p_obj) 方法
向容器中添加内容。
参数
- $p_obj一个 JQuery 对象，或一个控件（包含 $container 容器），或一个 HTML DOM 元素。
继承自
contains($p_target) 方法
返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。
参数
- $p_target一个 JQuery 对象，或 JQuery 选择器对应的字符串（如“#container”），或 HTML DOM 元素。
继承自
findControlByPermissionID(p_permissionID) 方法
根据指定的权限标识查找当前视图中对应的控件。
参数
- p_permissionID一个字符串，表示控件的权限标识。
继承自
getId() 方法
提供一个方法，获取表单中当前数据的主键。
hasChanged() 方法
提供一个方法，判断表单是否有修改过但未保存的信息。
load([p_callback]) 方法
加载数据,并渲染界面
参数
- p_callback可选的。一个 Function 对象，表示回调函数。
load([p_data], [p_callback]) 方法
加载数据,并渲染界面
参数
- p_data可选的。一个 JSON 对象，表示查询参数。
- p_callback可选的。一个 Function 对象，表示回调函数。
load([p_id], [p_callback]) 方法
加载数据,并渲染界面
参数
- p_id可选的。一个字符串，表示表单数据的唯一标识。
- p_callback可选的。一个 Function 对象，表示回调函数。
load([p_id], [p_data], [p_callback]) 方法
加载数据,并渲染界面
参数
- p_id可选的。一个字符串，表示表单数据的唯一标识。
- p_data可选的。一个 JSON 对象，表示查询参数。
- p_callback可选的。一个 Function 对象，表示回调函数。
moveTo(p_left, p_top) 方法
移动控件到指定位置。
参数
- p_left一个数字，表示 css 样式的 left 属性。
- p_top一个数字，表示 css 样式的 top 属性。
继承自
resizeTo(p_width, p_height) 方法
重设控件的大小。
参数
- p_width控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
save(p_data, p_callback) 方法
保存数据。
参数
- p_data提交到服务器的数据
- p_callback回调函数
selectEditor(p_name) 方法
选中指定字段的编辑器。
参数
- p_name编辑器的名称
setBorder(p_border) 方法
setBottom(p_bottom) 方法
setCssClass(p_cssClass) 方法
setDisplay(p_display) 方法
setHeight(p_height) 方法
setPadding(p_padding) 方法
setPosition(p_position) 方法
setTop(p_top) 方法
setVisible(p_visible) 方法
setWidth(p_width) 方法
validate([p_withoutIndication]) 方法
执行验证表单的逻辑。 返回一个对象（如 { successful: true }），该对象的 successful 属性表示该表单通过验证；
如果返回对象为 { successful: false, hint: "描述错误原因。", name: "错误字段名称" }，其中
name 是可选字段，是出错字段的 FormField.name，原因由 hint
描述。 该方法将触发 onvalidate 事件，可通过该事件进行自定义数据校验，详见该事件示例。
参数
- p_withoutIndication可选的。默认值为“false”。指定是否需要采用提示。
$wrap([p_obj]) 方法
返回一个 JQuery 对象。
参数
- p_obj可选的。默认值为“me.$e”。一个 JQuery 对象，或继承自 Control 的控件，或字符串，或 HTML DOM 元素。如果参数为 JQuery 对象，则返回本身；如果参数为继承自 Control 的控件，则返回控件的 $e 对象；如果参数为字符串，则返回以字符串为选择器的 JQuery 对象；如果参数为空，则返回控件本身的 $e 对象。
继承自
_editor_changed(e) 方法
受保护的。编辑器change事件处理方法，当editor的值发生改变时，会调用此方法和数据源进行数据同步
参数
- e
_entityContainer_changed(e) 方法
受保护的。数据源发生更新后调用此方法，将数据源的数据同步到表单的editor中
参数
- e
_entityContainer_changing(e) 方法
受保护的。数据源发生更新前触发changing事件，在事件处理函数中添加字段验证逻辑以及其他相关逻辑。
参数
- e
_entityContainer_error(e) 方法
受保护的。当加载数据出错时会调用此方法
参数
- e
_entityContainer_load(e) 方法
受保护的。数据源数据加载完成后会调用此方法，并触发me.onload事件，这个方法只会在成功加载数据后会调用。
参数
- e
_entityContainer_saved(e) 方法
受保护的。当表单数据保存后调用此方法，并重置新增数据的主键值
参数
- e
_entityContainer_saving(e) 方法
受保护的。在保存数据前执行此方法。
参数
- e
_parseField(p_options) 方法
受保护的。
参数
- p_options
字段详细信息
captionPosition 字段
controls 字段
获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControl 和
removeControl 方法向集合中添加或移除控件。
继承自
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.controls.Control。
集合索引
控件在集合中的序号（从 0 开始计数）。
display 字段
获取控件的显示样式值。如“none”，表示隐藏控件；
“block”表示强制作为块对象呈递。请使用 setDisplay。注：该"block"值不能在ComplexGrid控件中使用。
方法设置该字段的值。
继承自
editors 字段
获取一个集合，包含表单中所有的编辑器（Editor 类型）。
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.editors.Editor。
集合索引
编辑器的标识或编辑器在集合中的序号（从 0 开始计数）。
enabled 字段
entityContainer 字段
fields 字段
表单的所有的fields
isbuild 字段
指示表单是否已构建
layoutConfigs 字段
padding 字段
获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2
像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。
继承自
primaryKey 字段
数据对象主键属性名，默认为id。
事件详细信息
onctrladded 事件
onctrlremoved 事件
onload 事件
当表单加载完数据后触发该事件。
onrendering 事件
加载数据之后，表单渲染之前将触发该事件。
参数
- fields一个代表列信息的数组，如 [ {"name":"id","caption":"id","nullable":false,"length":32,"maxLength":100,"precision":3,"readOnly":false,"editorType":"TextEditor","dataType":"string","textMode":"","locked":false,"visible":true}, {"name":"name","caption":"名称","nullable":false,"length":32,"maxLength":100,"precision":3,"readOnly":false,"editorType":"TextEditor","dataType":"string","textMode":"","locked":false,"visible":true} ]
- cancel一个 Boolean 值，表示是否中止当前的渲染动作。
onsubmit 事件
当表单提交是触发该事件。
onvalidate 事件
当验证表单输入时将触发该事件。调用 validate 方法时会触发该事件。可通过订购该事件，实现对表单的自定义验证。
参数
- successful指定是否成功通过验证。默认为 true。
- hint指定没有通过验证的原因。默认为 null。
示例 1
下面是一段创建用户的 Form 代码，除需进行必填字段校验外，还需校验两次密码输入是否一致，这时需要订购
onvalidate 事件进行自定义验证的开发: