smartclient框架组件介绍6(DynamicForm,FormItem,FormItemType)

DynamicForm：表单布局组件
DynamicForm
继承至Canvas组件。
DynamicForm管理一组用于用户输入组件FormItem的集合。DynamicForm提供各个FormItem之间的布局、值的管理，同时也提供各个FormItem的验证和数据绑定的管理。

效果图

组件属性、方法清单

DynamicForm
继承至Canvas组件。所以自动拥有canvas的所有方法和属性。DynamicForm常用的属性清单如下图所示：

属性：类型	名称/描述
action ：String	表单提交时的url值。
autoFetchData：Boolean	假如为true，则该组件第一次被画出来时，则自动调用this.fetchData()方法，条件为initialCriteria这个属性指定的条件。
canFocus ：Boolean	当前表单是否允许获取键盘焦点事件，只有当该属性为true时，则该表单中的formItem才能获取键盘焦点事件。
cellBorder ：Number	表单的边框大小，单位为“像素”。该属性在调试表单布局时非常有用。
cellPadding ：Number	组件的可见边缘与表单的边缘之间的间距大小。单位为“像素”。
itemHoverAlign ：Alignment	Item项上显示的提示的文本内容对齐方式。 类型为：Alignment。其有效值为： "center":在当前容器中居中显示。 "left":在当前容器中居左显示。 "right":在当前容器中居右显示。
itemHoverDelay ：Number	提示信息延时多久显示出来。默认值: 500，单位时毫秒。
itemHoverHeight：Number	提示信息容器的默认高度。
itemHoverOpacity：Number	提示信息容器的透明度。
itemHoverWidth：Number	提示信息容器的默认宽度。
itemLayout：FormLayoutType	当前表单中各个form之间的布局。默认值是"table"。
minColWidth：Number	当前表单中各个form的最小宽度。默认值是: 20。
fields ：Array[FormItem]	是一组字段对象集合，在字段对象中指定了其顺序、布局和字段类型等属性。
colWidths：Array	指定DynamicForm按照表格布局时的每列的宽度，该属性的类型是数组类型。其中，所有列宽度的和应该为当前DynamicForm的宽度。 该属性接受三种类型： （1）数字类型(e.g. 100) 指定当前列的像素宽度； （2）百分比 (e.g. 20%) 指定当total form.width 的百分比给当前列； （3）"*" 指定当前剩余的所有空间指定给当前列，如果有多列的宽度都指定为”*”,则被指定的列平均分配所有剩余的空间。
numCols ：Number	指定DynamicForm按照表格布局时的列数，title和item分别占一列。
wrapItemTitles ：Boolean	设置title是否断行，默认断行。同时可以设置FormItem.wrapTitle属性覆盖当前属性。
titleOrientation ：TitleOrientation	表单中各个form的title的默认方向。该方向是指form中的title相对于form的输入组件来说的。 类型为TitleOrientation。 TitleOrientation的有效值为： "left" "top" "right"

DynamicForm常用的方法清单如下图所示：

方法	名称/描述
clearValues	重设表单的默认值，并清除所有错误信息。 void clearValues ()
clearErrors	清除表单上的所有错误信息。 void clearErrors (show) 参数： show - 类型: Boolean 假如为true，在清除错误信息后需要重绘表单。
clearFieldErrors	清除某个字段的错误信息。 void clearFieldErrors (fieldName, show) 参数： fieldName - 类型: String需要清除的字段名称。 show - 类型: Boolean假如为true，在清除错误信息后需要重绘表单。
clearValue	清除所有字段的值。 void clearValue (fieldName) 参数： fieldName - type: String可选 如果指定了fieldName则，清除指定的formItem的值，否则就全部清除。
getErrors	返回表单验证结果中的所有错误信息。 Object getErrors () 返回值： 类型: Object–返回的错误信息，格式如下：{fieldName:errors, fieldName:errors}
getEventItem	返回表单中当前鼠标事件所在的FormItem对象。 FormItem getEventItem ()
getItems	返回表单中所有的formItem对象。 Array of FormItem getItems ()
getTitleOrientation	返回表单中标题的方向。 TitleOrientation getTitleOrientation ([item])
hasErrors	表单验证后是否有错误信息。 Boolean hasErrors ()
focusInItem	移动键盘焦点到指定的Item上。 void focusInItem (itemName)
hideItem	隐藏指定的FormItem对象。 void hideItem (itemName)
reset	重置表单。 void reset ()
validate	验证表单。并且根据验证结果重绘表单中的错误信息。 Boolean validate (validateHiddenFields) 参数: validateHiddenFields 类型: Boolean 是否验证隐藏字段。 返回值: 类型: Boolean -没有任何错误则返回true，否则返回false。
getItem	返回name或者index对应的FormItem 对象。 FormItem getItem (itemName) 参数: itemName -类型: String或int 需要获取字段的名称或序号。 返回值: 类型: FormItem - FormItem 对象或者没有找到则返回null。
getValue	返回name或者index对应的FormItem 对象的值。 any getValue (fieldName) 参数: fieldName - 类型: String 需要获取值的FormItem名称。 返回值: type: any – 字段的值。
setValue	对name对应的FormItem 设置值。 void setValue (fieldName, value) 参数: fieldName - 类型: String 需要设置的formItem的名称。 value - 类型: String 需要设置的新值。

focusInItem方法

详述

方法名	focusInItem
概述	移动键盘焦点到指定的Item上
返回	无
参数	参数	说明
itemName	formItem的name属性

使用示例

Var form = isc.DynamicForm.create({
fields: [{type:"header", defaultValue:"Registration Form"},{name:"firstName"
title:"First Name" type:"text" },{name:"lastName" title:"Last Name" type:"text" required:"true" },{name:"email"
title:"Email" type:"text" required:"true",validators:[{type :”
regexp”, expression:"^([a-zA-Z0-9_.\-+])+@(([a-zA-Z0-9\-])+\.)+[a-zA-Z0-9]{2,4}$"}]},{name:
"password"},{name: "password2", title: "Password Again", type: "password", required: true, length: 20, validators: [{
type: "matchesField",otherField: "password",errorMessage:
"Passwords do not match"}]},
{name: "acceptTerms", title: "I accept the terms of use.", type: "checkbox", required: true, width: "150"},
{name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}]
,
values : {firstName: "Bob",email:
bob@.com,password: "sekrit",password2: "fatfinger"}
});
form.focusInItem(“lastName”);

getItem 方法

详述

方法名	getItem
概述	返回name或者index对应的FormItem 对象。
返回	FormItem
参数	参数	说明
itemName	formItem的name属性

使用示例

Var form = isc.DynamicForm.create({
fields: [{type:"header", defaultValue:"Registration Form"},{name:"firstName"
title:"First Name" type:"text" },{name:"lastName" title:"Last Name" type:"text" required:"true" },{name:"email"
title:"Email" type:"text" required:"true",validators:[{type :”
regexp”, expression:"^([a-zA-Z0-9_.\-+])+@(([a-zA-Z0-9\-])+\.)+[a-zA-Z0-9]{2,4}$"}]},
{name: "password"},
{name: "password2", title: "Password Again", type: "password", required: true, length: 20, validators: [{
type: "matchesField",otherField:
"password",errorMessage: "Passwords do not match"}]},
{name: "acceptTerms", title: "I accept the terms of use.", type: "checkbox", required: true, width: "150"},
{name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}]
,
values : {firstName: "Bob",email:
bob@.com,password: "sekrit",password2: "fatfinger"}
});
Var lastFormItem = form.getItem(“lastName”);

getValue方法

详述

方法名	getValue
概述	返回name或者index对应的FormItem 对象的值
返回	Name对应的formItem的值。
参数	参数	说明
itemName	formItem的name属性

使用示例

Var form = isc.DynamicForm.create({
fields: [
{type:"header", defaultValue:"Registration Form"},{name:"firstName"
title:"First Name" type:"text" },{name:"lastName" title:"Last Name" type:"text" required:"true" },{name:"email"
title:"Email" type:"text" required:"true",validators:[{type :”
regexp”, expression:"^([a-zA-Z0-9_.\-+])+@(([a-zA-Z0-9\-])+\.)+[a-zA-Z0-9]{2,4}$"}]},
{name: "password"},
{name: "password2", title: "Password Again", type: "password", required: true, length: 20,

validators: [{type: "matchesField",therField:
"password",errorMessage: "Passwords do not match"]},
{name: "acceptTerms", title: "I accept the terms of use.", type: "checkbox", required: true, width: "150"},
{name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}]
,
values : {firstName: "Bob",email:
bob@.com,password: "sekrit",password2: "fatfinger"}
});
Var lastName = form. getValue(“lastName”);

FormItem：表单项组件

表单项组件(FormItem)是参与到表单(DynamicForm)用以管理一些值。
一般情况下通过对DynamicForm的定义时一起定义对应的formItem来代替直接对FormIte的创建。所有的表单项都继承至该类。

效果图

组件属性、方法清单

FormItem常用的属性清单如下所示：

属性	名称/描述
Name：string	表单项的标识。
Title：string	表单项的标题。
showTitle：Boolean	是否显示标题。
Type：FormItemType	表单项的类型，即指定具体表单项的实现对象。 具体表单项类型在FormItemType一节详速。

FormItem常用的方法清单如下图所示：

方法	名称/描述
Changed	在表单项的值发生改变的时候会回调这个函数。 void changed (form, item, value) 参数： form - 类型: DynamicForm 表单对象。 item - 类型: FormItem 表单项对象。 value - 类型: any 改变之后的值。
blur	当前表单项失去键盘焦点时的回调函数。 void blur (form, item) 参数： form - 类型: DynamicForm 管理当前表单项的表单对象。 item - 类型: FormItem 当前表单项对象。
click	表单项的单击响应。 注意: click()对StaticTextItem, BlurbItems, ButtonItem等有效，其他的比如 HiddenItem是不支持的。 void click (form, item) 参数： form - 类型: DynamicForm 当前表单对象。 item - 类型: FormItem 当前表单项对象。
disable	设置当前表单项不可用。 void disable ()
enable	设置当前表单项可用。 void enable ()
focus	当前表单项获得键盘焦点事件时的回调函数。 void focus (form, item) 参数： form - 类型: DynamicForm 当前表单对象。 item - 类型: FormItem 当前表单项对象。
formatValue	格式化表单项显示的值。 String formatValue (value, record, form, item) 参数： value - 类型: any 当前字段值，可能为null。 record - 类型: ListGridRecord 当前记录对象。 form - 类型: DynamicForm 表单对象。 item - 类型: FormItem 表单项对象。 返回值： 类型: String –需要在界面上显示的字符串。
getCanFocus	返回当前表单项是否允许获取键盘焦点事件。 Boolean getCanFocus () 返回值： 类型: Boolean –是否允许键盘焦点事件。
getFieldName	返回当前表单项的字段名称。 String getFieldName () 返回值： 类型: String -当前表单项的字段名称。
getTitle	返回当前表单项的标题。 HTML getTitle () 返回值： 类型: HTML - 当前表单项的标题。
getValue	返回当前表单项对应的值。 any getValue () 返回值： 类型: any - 当前表单项对应的值。
hide	隐藏当前表单项。 void hide ()
setDisabled	设置当前表单项的可用状态。 void setDisabled (disabled) 参数： disabled - 类型: Boolean 当前表单项是否可用。
setValue	设置当前表单项的值。 void setValue (newValue) 参数： newValue - 类型: any 当前表单项的值。

Changed方法

详述

方法名	Changed
概述	在表单项的值发生改变的时候会回调这个函数
返回	无
参数	参数	说明
form	类型: DynamicForm 表单对象。
item	类型: FormItem 表单项对象。
value	类型: any 改变之后的值。

使用示例

isc.DynamicForm.create({
width: 500,
fields: [{name: "shipTo", title: "Ship to", type: "select",
valueMap: {"US" : "<b>United States</b>","CH"
: "China","JA" : "<b>Japan</b>","IN" : "India",},
Changed:function (form, item, value)
{isc.say(“select value is changed!”);}}]});

FormItemType

DynamicForms根据fields属性中的formItem的type字段自动选择对应的FormItemType对象。自动映射关系如下表所示：

类型名称	说明
"text"	界面渲染为TextItem。
"boolean"	界面渲染为CheckboxItem
"integer"	界面默认与"text"一致
"float"	界面默认与"text"一致
"date"	界面渲染为DateItem
"time"	界面渲染为TimeItem
"datetime"	界面渲染为DateTimeItem（同时显示和修改日期和时间）
"enum"	界面渲染为SelectItem.
"sequence"	界面默认与"text"一致
"link"	假如指定canEdit为false则渲染为LinkItem，否则渲染为TextItem。
"binary"	界面渲染为UploadItem

同时也可以设置field.editorType
这个属性覆盖上面的默认映射关系。

假如设置field的canEdit为false则当前表单项会自动映射成StaticTextItem
类型。

效果图

无

组件属性、方法清单

无

TextItem类型

详述

用于管理Text字段。

使用示例

isc.DynamicForm.create({

width: 300,

fields: [ {title:"Item", type:"text"} ]

});

ButtonItem类型

详述

用于管理Button对象

使用示例

isc.DynamicForm.create({

width: 300,

fields: [ {title:"a button", width : 100, type:"button"} ]

});