全称 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() 初始化方法。执行设置样式并初始化属性等操作。

方法

名称 说明
addControl(p_control, p_islinebreak) Control 对象添加到集合 controls 中。
addControls(p_controls) 将一组 Control 对象添加到集合 controls 中。
append($p_obj) 向容器中添加内容。
blur() 触发所有编辑器(Editor 类型)的 blur 事件。
contains($p_target) 返回一个 Boolean 值,该值表示控件的容器中是否包含该 JQuery 对象。
dispose()
findControl(p_alias)
findControlByPermissionID(p_permissionID) 根据指定的权限标识查找当前视图中对应的控件。
focus() 触发所有编辑器(Editor 类型)的 focus 事件。
getContext() 获取控件当前所属 Weblet 的上下文信息( WebletContext 类型)。
getEditor(p_name) 返回一个编辑器(Editor 类型)。
getEl() 获取控件容器对应的 HTML DOM 元素对象。
getId() 提供一个方法,获取表单中当前数据的主键。
hasChanged() 提供一个方法,判断表单是否有修改过但未保存的信息。
hide() 隐藏控件,设置控件不可见。
load([p_callback]) 加载数据,并渲染界面
load([p_data], [p_callback]) 加载数据,并渲染界面
load([p_id], [p_callback]) 加载数据,并渲染界面
load([p_id], [p_data], [p_callback]) 加载数据,并渲染界面
moveTo(p_left, p_top) 移动控件到指定位置。
removeControl(p_control, p_deep) controls 集合中移除指定的 Control 对象。 从集合中移除控件时,该控件会被从上下文的 DOM 中移除,但仍驻留在内存中,可以重用。
resizeTo(p_width, p_height) 重设控件的大小。
save(p_data, p_callback) 保存数据。
selectEditor(p_name) 选中指定字段的编辑器。
setBorder(p_border) 设置控件的边框样式。
setBottom(p_bottom) 设置 bottom 字段的值。
setCss(p_css) 设置 css 字段的值。
setCssClass(p_cssClass) 设置 cssClass} 字段的值
setDisplay(p_display) 设置 display 字段的值。
setEnabled(p_enabled) 启用或禁用全部编辑器
setEntityContainer(p_entityContainer) 设置 entityContainer 字段的值。
setHeight(p_height) 设置 height 字段的值。
setLeft(p_left) 设置 left 字段的值。
setPadding(p_padding) 设置控件的内边距。
setPosition(p_position) 设置 position 字段的值。
setRight(p_right) 设置 right 字段的值。
setTop(p_top) 设置 top 字段的值。
setVisible(p_visible) 设置 visible 字段的值。
setWidth(p_width) 设置 width 字段的值。
show() 显示控件,设置控件可见。
validate([p_withoutIndication]) 执行验证表单的逻辑。 返回一个对象(如 { successful: true }),该对象的 successful 属性表示该表单通过验证; 如果返回对象为 { successful: false, hint: "描述错误原因。", name: "错误字段名称" },其中 name 是可选字段,是出错字段的 FormField.name,原因由 hint 描述。 该方法将触发 onvalidate 事件,可通过该事件进行自定义数据校验,详见该事件示例。
$(p_expression) 该方法与 me.$e.find(p_expression) 等同。
$wrap([p_obj]) 返回一个 JQuery 对象。
_editor_changed(e) 受保护的。编辑器change事件处理方法,当editor的值发生改变时,会调用此方法和数据源进行数据同步
_entityContainer_changed(e) 受保护的。数据源发生更新后调用此方法,将数据源的数据同步到表单的editor中
_entityContainer_changing(e) 受保护的。数据源发生更新前触发changing事件,在事件处理函数中添加字段验证逻辑以及其他相关逻辑。
_entityContainer_error(e) 受保护的。当加载数据出错时会调用此方法
_entityContainer_load(e) 受保护的。数据源数据加载完成后会调用此方法,并触发me.onload事件,这个方法只会在成功加载数据后会调用。
_entityContainer_saved(e) 受保护的。当表单数据保存后调用此方法,并重置新增数据的主键值
_entityContainer_saving(e) 受保护的。在保存数据前执行此方法。
_parseField(p_options) 受保护的。

字段

名称 说明
alias 获取或设置一个字符串,表示控件的别名。
baseUrl 详见 DataGrid.baseUrl 属性。
border 获取控件的边框样式。如“1px solid red”,表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。
bottom 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。
captionPosition
contextMenu 获取或设置容器的上下文菜单。
controls 获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControlremoveControl 方法向集合中添加或移除控件。
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 方法时会触发该事件。可通过订购该事件,实现对表单的自定义验证

构造函数详细信息

DynamicForm() 方法

构建 DynamicForm 类的新实例。

初始化函数详细信息

init() 方法

初始化方法。执行设置样式并初始化属性等操作。

继承自


方法详细信息

addControl(p_control, p_islinebreak) 方法

Control 对象添加到集合 controls 中。

参数

  • p_control
    一个 Control 对象。
  • p_islinebreak
    一个布尔值,表示添加新控件时是否先换行。

继承自


addControls(p_controls) 方法

将一组 Control 对象添加到集合 controls 中。

参数

  • p_controls
    一个 Control 控件数组。

继承自


append($p_obj) 方法

向容器中添加内容。

参数

  • $p_obj
    一个 JQuery 对象,或一个控件(包含 $container 容器),或一个 HTML DOM 元素。

继承自


blur() 方法

触发所有编辑器(Editor 类型)的 blur 事件。

contains($p_target) 方法

返回一个 Boolean 值,该值表示控件的容器中是否包含该 JQuery 对象。

参数

  • $p_target
    一个 JQuery 对象,或 JQuery 选择器对应的字符串(如“#container”),或 HTML DOM 元素。

继承自


dispose() 方法


findControl(p_alias) 方法

参数

  • p_alias

继承自


findControlByPermissionID(p_permissionID) 方法

根据指定的权限标识查找当前视图中对应的控件。

参数

  • p_permissionID
    一个字符串,表示控件的权限标识。

继承自


focus() 方法

触发所有编辑器(Editor 类型)的 focus 事件。

getContext() 方法

获取控件当前所属 Weblet 的上下文信息( WebletContext 类型)。

继承自


getEditor(p_name) 方法

返回一个编辑器(Editor 类型)。

参数

  • p_name
    一个数字,或编辑器的标识(如 “birthday”)。

getEl() 方法

获取控件容器对应的 HTML DOM 元素对象。

继承自


getId() 方法

提供一个方法,获取表单中当前数据的主键。

hasChanged() 方法

提供一个方法,判断表单是否有修改过但未保存的信息。

hide() 方法

隐藏控件,设置控件不可见。

继承自


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 属性。

继承自


removeControl(p_control, p_deep) 方法

controls 集合中移除指定的 Control 对象。 从集合中移除控件时,该控件会被从上下文的 DOM 中移除,但仍驻留在内存中,可以重用。

参数

  • p_control
    一个 Control 对象。
  • p_deep
    表示是否从内存中删除指定控件。

继承自


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) 方法

设置控件的边框样式。

参数

  • p_border
    一个字符串,表示css样式的 border 属性。

继承自


setBottom(p_bottom) 方法

设置 bottom 字段的值。

参数

  • p_bottom
    控件的下边界与父容器下边界的像素距离,可以是数字(如 50),也可以是字符串(如 50%)。

继承自


setCss(p_css) 方法

设置 css 字段的值。

参数

  • p_css
    一个 JSON 对象,表示控件的 CSS 样式。

继承自


setCssClass(p_cssClass) 方法

设置 cssClass} 字段的值

参数

  • p_cssClass
    一个String 对象,样式classname

继承自


setDisplay(p_display) 方法

设置 display 字段的值。

参数

  • p_display
    css 样式的 display 属性。

继承自


setEnabled(p_enabled) 方法

启用或禁用全部编辑器

参数

  • p_enabled
    一个布尔值

继承自


setEntityContainer(p_entityContainer) 方法

设置 entityContainer 字段的值。

参数

  • p_entityContainer
    from表单关联的数据源

setHeight(p_height) 方法

设置 height 字段的值。

参数

  • p_height
    控件的高度,可以是数字(如 100),也可以是字符串(如 “100%”)。

继承自


setLeft(p_left) 方法

设置 left 字段的值。

参数

  • p_left
    控件的左边界与父容器左边界的像素距离,可以是数字(如 50),也可以是字符串(如 50%)。

继承自


setPadding(p_padding) 方法

设置控件的内边距。

参数

  • p_padding
    css 样式的 padding 属性。

继承自


setPosition(p_position) 方法

设置 position 字段的值。

参数

  • p_position
    一个字符串,表示 css 样式的 position 属性。

继承自


setRight(p_right) 方法

设置 right 字段的值。

参数

  • p_right
    控件的右边界与父容器右边界的像素距离,可以是数字(如 50),也可以是字符串(如 50%)。

继承自


setTop(p_top) 方法

设置 top 字段的值。

参数

  • p_top
    控件的上边界与父容器上边界的像素距离,可以是数字(如 50),也可以是字符串(如 50%)。

继承自


setVisible(p_visible) 方法

设置 visible 字段的值。

参数

  • p_visible
    一个 Boolean 值,表示控件是否可见。

继承自


setWidth(p_width) 方法

设置 width 字段的值。

参数

  • p_width
    控件的高度,可以是数字(如 500)、字符串(如“500px”或“50%”).

继承自


show() 方法

显示控件,设置控件可见。

继承自


validate([p_withoutIndication]) 方法

执行验证表单的逻辑。 返回一个对象(如 { successful: true }),该对象的 successful 属性表示该表单通过验证; 如果返回对象为 { successful: false, hint: "描述错误原因。", name: "错误字段名称" },其中 name 是可选字段,是出错字段的 FormField.name,原因由 hint 描述。 该方法将触发 onvalidate 事件,可通过该事件进行自定义数据校验,详见该事件示例。

参数

  • p_withoutIndication
    可选的。默认值为“false”。指定是否需要采用提示。

$(p_expression) 方法

该方法与 me.$e.find(p_expression) 等同。

参数

  • p_expression

继承自


$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

字段详细信息

alias 字段

获取或设置一个字符串,表示控件的别名。

继承自


baseUrl 字段

详见 DataGrid.baseUrl 属性。

border 字段

获取控件的边框样式。如“1px solid red”,表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。

继承自


bottom 字段

获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。

继承自


captionPosition 字段


contextMenu 字段

获取或设置容器的上下文菜单。

继承自

默认值

null

controls 字段

获取容器包含的控件集合。集合中的单个控件也可能是一个容器。请使用 addControlremoveControl 方法向集合中添加或移除控件。

继承自

集合

该字段是一个集合数组字段。 集合中成员的类型为 mx.controls.Control

集合索引

控件在集合中的序号(从 0 开始计数)。

cssClass 字段

指定css伪类名称,设置控件显示样式

继承自


display 字段

获取控件的显示样式值。如“none”,表示隐藏控件; “block”表示强制作为块对象呈递。请使用 setDisplay。注:该"block"值不能在ComplexGrid控件中使用。 方法设置该字段的值。

继承自


editors 字段

获取一个集合,包含表单中所有的编辑器(Editor 类型)。

集合

该字段是一个集合数组字段。 集合中成员的类型为 mx.editors.Editor

集合索引

编辑器的标识或编辑器在集合中的序号(从 0 开始计数)。

enabled 字段

获取控件是否可以对用户交互作出响应。如果该值为 true,则表示控件可以对用户交互作出响应;反之则不能。 请使用 setEnabled 方法设置该字段的值。

继承自

默认值

true

entityContainer 字段

获取一个 FormEntityContainer 对象(通常是 FormEntityContainer 类型),表示表单的数据源。 请使用 setEntityContainer 方法设置该字段的值。

eTag 字段

获取控件的标签。

继承自

默认值

<div/>

fields 字段

表单的所有的fields

height 字段

获取容器的高度。可以是数字(如 500)、字符串(如“500px”或“50%”)。

继承自

默认值

100%

isbuild 字段

指示表单是否已构建

layout 字段

获取和设置一个容器控件的布局器。详见 LayoutFactoryClass.createLayout 方法的 p_layout参数。

继承自


layoutConfigs 字段

获取或者设置一个 JSON 对象,该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。

继承自


layoutOptions 字段

获取和设置布局参数,该属性是一个 JSON 对象。

继承自

默认值

null

left 字段

获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。

继承自


padding 字段

获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素; “4px 2px 3px 1px”则表示上边距为 4 像素,右边距为 2 像素,下边距为 3 像素,左边距为 1 像素。请使用 setPadding 方法设置该字段的值。

继承自


parent 字段

获取控件所属的父对象。

继承自


permissionID 字段

获取或设置一个字符串,表示控件的权限标识。

继承自


position 字段

详见 Control.position 属性。

继承自

默认值

relative

primaryKey 字段

数据对象主键属性名,默认为id。

right 字段

获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。

继承自


top 字段

获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。

继承自


visible 字段

获取一个 Boolean 值,表示控件是否可见。如果该值为 true,则表示控件可见;反之则不可见。请使用 setVisible 方法设置该字段的值。

继承自

默认值

true

width 字段

获取容器的宽度。可以是数字(如 500)、字符串(如“500px”或“50%”)。

继承自

默认值

auto

$container 字段

获取容器控件中用来包含控件 DOM 元素的占位符。

继承自


$e 字段

获取该控件的占位符,该占位符为一个 JQuery 对象。

继承自


事件详细信息

onctrladded 事件

当添加控件到容器后,将触发该事件。

参数

  • ctrl
    一个 Control 类型或子类型对象。

继承自


onctrlremoved 事件

当从容器移除控件后,将触发该事件。

参数

  • ctrl
    一个 Control 类型或子类型对象。

继承自


onload 事件

当表单加载完数据后触发该事件。

onloading 事件

当数据容器开始加载数据时,将触发该事件。调用 load 方法时会触发该事件。

参数

  • cancel
    一个 Boolean 值,表示是否中止当前的加载动作。

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 事件进行自定义验证的开发: