构建 SkinDataForm 类的新实例。
| 全称 | mx.datacontrols.SkinDataForm |
| 命名空间 | mx.datacontrols |
| 类 | SkinDataForm |
| 继承层次结构 | SkinDataFormDataFormControl |
| 源文件 | ~\mx\scripts\datacontrols\SkinDataForm.js |
提供一个自定义模板的表单控件类。
示例 1
以下是一个创建 SkinDataForm 的示例。
其中皮肤模板是一个 HTML 或者 JSP 文件，需要编辑的部分通过占位符来填充，以下是模板内容示例：
| HTML 代码 |
<table>
<tr>
<td align="right">
姓名：
</td>
<td>@#@AV-empName#OPTIONS-{editorType:"TextEditor", readOnly: true}</td>
</tr>
<tr>
<td align="right">
性别：
</td>
<td>@#@AV-empSex#OPTIONS-{width:500, editorType:"DropDownEditor"}</td>
</tr>
</table> |
示例 2
该示例将说明如何创建一个自定义皮肤的表单 SkinDataForm。
| JavaScript 代码 |
var userData = { MC: "小明", XB: "f", MZ: "汉", CYM: "明明", CSSJ: parseDate("1984-3-1") };
var userMeta = [
{name: "id", caption: "ID", nullable: false, readOnly: true},
{name: "name", caption: "名称", nullable: true},
{name: "age", caption: "年龄", nullable: true},
{name: "gender", caption: "性别", nullable: true},
{name: "birthday", caption: "出生日期", nullable: true}
];
var formEntityContainer = new mx.datacontainers.FormEntityContainer(
{ baseUrl : "http://lqr-pc:8081/mx.framework/rest/getData",
priaryKey:"id"} ); // 表单数据容器为 mx.datacontainers.FormEntityContainer 类型
var skinDataForm = new mx.datacontrols.SkinDataForm({
skinUrl:"http://lqr-pc:8081/mx.framework/myWeblet/SkinFile.html",
entityContainer: formEntityContainer
}); |
构造函数
| 名称 | 说明 |
| SkinDataForm() | 构建 SkinDataForm 类的新实例。 |
方法
字段
| 名称 | 说明 |
| alias | 获取或设置一个字符串，表示控件的别名。 |
| baseUrl | 详见 DataGrid.baseUrl 属性。 |
| border | 获取控件的边框样式。如“1px solid red”，表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
| bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
| captionColumnWidth | 获取标题列的宽度。 |
| cssClass | 指定css伪类名称，设置控件显示样式 |
| display | 获取控件的显示样式值。如“none”，表示隐藏控件； “block”表示强制作为块对象呈递。请使用 setDisplay。注：该"block"值不能在ComplexGrid控件中使用。 方法设置该字段的值。 |
| displayPrimaryKey | 获取或者设置一个 Boolean 值，该属性表示是否需要显示表单中的主键字段。 |
| editors | 模板加载完成后。 |
| enabled | 获取控件是否可以对用户交互作出响应。如果该值为 true，则表示控件可以对用户交互作出响应；反之则不能。 请使用 setEnabled 方法设置该字段的值。 |
| entityContainer | 获取一个 FormEntityContainer 对象（通常是 FormEntityContainer 类型），表示表单的数据源。 请使用 setEntityContainer 方法设置该字段的值。 |
| eTag | 获取控件的标签。 |
| fieldCaptionRender | 设置或获取一个函数，用来自定义表单中字段的标题显示方式。 函数需要返回一个 JQquey 对象或者一个 HTML 片段，返回值将用作字段的标题。 |
| fields | 获取一个具有层次关系的集合，包含当前表单中所有字段（FormField）和字段分组（FormFieldGroup）信息。 另请参考 allFields 字段。 |
| groups | 获取一个集合，包含表单中所有的编辑器（FormFieldGroup 类型）。 |
| height | 获取控件的高度。可以是数字（如 500）、字符串（如“500px”或“50%”）。请使用 setHeight 方法设置该字段的值。 |
| ignoreCheckOnHide | 一个Boolean值，表示是否忽略隐藏编辑器的校验,如果为true，则忽略，flase为校验 |
| isCache | 获取和设置一个 Boolean 值，表示获取模板时是否使用缓存。false 表示不使用，反之使用。 |
| isForm | 获取和设置一个 Boolean 值，表示控件是否是表单控件，false 表示该控件不是表单控件，反之是表单控件，将和 EntityContainer 绑定使用。 |
| layoutConfigs | 获取或者设置一个 JSON 对象，该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
| left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
| maxCols | 获取和设置单行中最大列宽度总数。 |
| padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2 像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
| parent | 获取控件所属的父对象。 |
| permissionID | 获取或设置一个字符串，表示控件的权限标识。 |
| position | 获取控件位置样式值。如“static”，表示无特殊定位，对象遵循 HTML 定位规则。请使用 setPosition
方法设置该字段的值。
该字段的可选值包括:
|
| primaryKey | 详见 DataGrid.primaryKey 属性。 |
| printHideFields | 是否打印默认隐藏的字段。 |
| right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
| skinUrl | 设置或获取模板的路径 URL。 |
| top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
| visible | 获取一个 Boolean 值，表示控件是否可见。如果该值为 true，则表示控件可见；反之则不可见。请使用 setVisible 方法设置该字段的值。 |
| width | 获取控件的宽度。可以是数字（如 500）、字符串（如“500px”或“50%”）。请使用 setWidth 方法设置该字段的值。 |
| $e | 获取该控件的占位符，该占位符为一个 JQuery 对象。 |
事件
| 名称 | 说明 |
| onload | 当表单加载完数据后触发该事件。 |
| onloading | 当数据容器开始加载数据时，将触发该事件。调用 load 方法时会触发该事件。 |
| onrendering | 加载数据之后，表单渲染之前将触发该事件。 |
| onskinload | 当皮肤加载完成后，将触发该事件。 |
| onsubmit | 当表单提交是触发该事件。 |
onvalidate |
当验证表单输入时将触发该事件。调用 validate 方法时会触发该事件。可通过订购该事件，实现对表单的自定义验证。 |
方法详细信息
contains($p_target) 方法
返回一个 Boolean 值，该值表示控件的容器中是否包含该 JQuery 对象。
参数
- $p_target一个 JQuery 对象，或 JQuery 选择器对应的字符串（如“#container”），或 HTML DOM 元素。
继承自
load([p_callback]) 方法
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 属性。
继承自
printForm(p_preview, p_printOptions) 方法
提供一个方法，打印表单内容。
参数
- p_preview: true | false 一个 Boolean 值，表示是否启用打印预览功能，默认 true true : 表示显示打印预览 false : 表示不显示打印预览，直接打印
- p_printOptions
继承自
resizeTo(p_width, p_height) 方法
重设控件的大小。
参数
- p_width控件的宽度，可以是数字（如 100），也可以是字符串（如 “100%”）。
- p_height控件的高度，可以是数字（如 100），也可以是字符串（如 “100%”）。
继承自
setBorder(p_border) 方法
setBottom(p_bottom) 方法
setCssClass(p_cssClass) 方法
setDisplay(p_display) 方法
setEntityContainer(p_entityContainer) 方法
setFieldCaption(p_fieldName, p_caption) 方法
设置表单中字段信息的标题。
参数
- p_fieldName一个字符串，表示字段信息的标识。
- p_caption一个字符串，指定字段的标题。
继承自
setFieldCaptionVisible(p_fieldName, p_visible) 方法
设置表单中字段标题的可见性。
参数
- p_fieldName一个字符串，表示字段信息的标识。
- p_visible一个 Boolean 值，表示是否可见。如果该值为 true，表示字段信息可见；反之则不可见。
继承自
setFieldEnabled(p_fieldName, p_enabled) 方法
设置字段信息中编辑器（Editor 类型）的
Control.enabled 属性的值。
参数
- p_fieldName一个字符串，表示字段信息的标识。
- p_enabled一个 Boolean 值，详见 Control.setEnabled 方法的参数。
继承自
setFieldNullable(p_fieldName, p_nullable) 方法
设置表单中字段是否可空。
参数
- p_fieldName一个字符串，表示字段信息的标识。
- p_nullable一个 Boolean 值，指定字段是否允许空。
继承自
setFieldReadOnly(p_fieldName, p_readOnly) 方法
设置字段信息中编辑器（Editor 类型）的
Editor.readOnly 属性的值。
参数
- p_fieldName一个字符串，表示字段信息的标识。
- p_readOnly一个 Boolean 值，表示是否只读。如果该值为 true，表示只读；反之为可编辑。
继承自
setFieldVisible(p_fieldName, p_visible) 方法
设置表单中字段信息的可见性。
参数
- p_fieldName一个字符串，表示字段信息的标识。
- p_visible一个 Boolean 值，表示是否可见。如果该值为 true，表示字段信息可见；反之则不可见。
继承自
setGroupCaption(p_name, p_new_caption) 方法
设置表单中分组的标题。
参数
- p_name一个字符串或数字,FormFiledGroup的name值,或是FormFiledGroup在表单中的索引
- p_new_caption一个字符串。表示group的新caption。
继承自
setGroupVisible(p_name, p_visible) 方法
设置表单中分组的可见性。
参数
- p_name一个字符串或数字,FormFiledGroup的name值,或是FormFiledGroup在表单中的索引
- p_visible一个 Boolean 值，表示是否可见。如果该值为 true，表示字段信息可见；反之则不可见。
继承自
setHeight(p_height) 方法
setPadding(p_padding) 方法
setPosition(p_position) 方法
setTop(p_top) 方法
setVisible(p_visible) 方法
setWidth(p_width) 方法
validate(p_data, [p_withoutIndication]) 方法
执行验证表单的逻辑。 返回一个对象（如 { successful: true }），该对象的 successful 属性表示该表单通过验证；
如果返回对象为 { successful: false, hint: "描述错误原因。", fieldName: "错误字段名称" }，其中
fieldName 是可选字段，是出错字段的 FormField.name，原因由 hint
描述。 该方法将触发 onvalidate 事件，可通过该事件进行自定义数据校验，详见该事件示例。
参数
- p_data待校验的表单数据。
- p_withoutIndication可选的。默认值为“false”。指定是否需要采用提示。
继承自
$wrap([p_obj]) 方法
返回一个 JQuery 对象。
参数
- p_obj可选的。默认值为“me.$e”。一个 JQuery 对象，或继承自 Control 的控件，或字符串，或 HTML DOM 元素。如果参数为 JQuery 对象，则返回本身；如果参数为继承自 Control 的控件，则返回控件的 $e 对象；如果参数为字符串，则返回以字符串为选择器的 JQuery 对象；如果参数为空，则返回控件本身的 $e 对象。
继承自
__entityContainer_load(e) 方法
受保护的。
参数
- e
_loadSkin() 方法
受保护的。加载表单皮肤。
_markSkinUrl(p_skinUrl) 方法
受保护的。设置修复 Url 路径。
参数
- p_skinUrl
_renderField(p_field, $p_table, p_level) 方法
_renderFieldGroup(p_fields, $p_table, p_level) 方法
_skinLoad_callBack(response, status, xhr) 方法
受保护的。表单皮肤加载完成后处理事件。
参数
- response
- status
- xhr
字段详细信息
display 字段
获取控件的显示样式值。如“none”，表示隐藏控件；
“block”表示强制作为块对象呈递。请使用 setDisplay。注：该"block"值不能在ComplexGrid控件中使用。
方法设置该字段的值。
继承自
displayPrimaryKey 字段
enabled 字段
entityContainer 字段
继承自
fieldCaptionRender 字段
设置或获取一个函数，用来自定义表单中字段的标题显示方式。
函数需要返回一个 JQquey 对象或者一个 HTML 片段，返回值将用作字段的标题。
继承自
fields 字段
继承自
groups 字段
获取一个集合，包含表单中所有的编辑器（FormFieldGroup 类型）。
继承自
集合
该字段是一个集合数组字段。
集合中成员的类型为
mx.datacontrols.FormFieldGroup。
集合索引
FormFieldGroup的name或FormFieldGroup在集合中的序号（从 0 开始计数）。
height 字段
ignoreCheckOnHide 字段
一个Boolean值，表示是否忽略隐藏编辑器的校验,如果为true，则忽略，flase为校验
继承自
默认值
true
isCache 字段
获取和设置一个 Boolean 值，表示获取模板时是否使用缓存。false 表示不使用，反之使用。
默认值
false
layoutConfigs 字段
padding 字段
获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素； “4px 2px 3px 1px”则表示上边距为 4 像素，右边距为 2
像素，下边距为 3 像素，左边距为 1 像素。请使用 setPadding 方法设置该字段的值。
继承自
position 字段
获取控件位置样式值。如“static”，表示无特殊定位，对象遵循 HTML 定位规则。请使用 setPosition
方法设置该字段的值。
该字段的可选值包括:
- static
- relative
- absolute
- fixed
继承自
skinUrl 字段
设置或获取模板的路径 URL。
width 字段
事件详细信息
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 值，表示是否中止当前的渲染动作。
继承自
onskinload 事件
当皮肤加载完成后，将触发该事件。
onvalidate 事件
当验证表单输入时将触发该事件。调用 validate 方法时会触发该事件。可通过订购该事件，实现对表单的自定义验证。
参数
- successful指定是否成功通过验证。默认为 true。
- hint指定没有通过验证的原因。默认为 null。
继承自
示例 1
下面是一段创建用户的 Form 代码，除需进行必填字段校验外，还需校验两次密码输入是否一致，这时需要订购
onvalidate 事件进行自定义验证的开发:
| JavaScript 代码 |
var entityContainer = new mx.datacontainers.FormEntityContainer(
baseUrl: mx.mappath("~/user")
);
var form = new mx.datacontrols.DataForm({
entityContainer: entityContainer,
fields: [
{ name: "userName", caption: "用户名", nullable: false },
{ name: "password", caption: "密码", textMode: "password", nullable: false },
{ name: "confirmPassword", caption: "密码", textMode: "password", nullable: false }
]
});
entityContainer.load();
form.on("validate", function(e)
{
// e.param，待校验的表单数据。
// e.dataForm，当前表单信息。
var entityContainer = form.entityContainer;
if (entityContainer.getValue("password") != entityContainer.getValue("confirmPassword"))
{
// 通过事件参数传递校验结果
e.successful = false;
e.hint = "两次输入的密码不一致。";
}
}); |