SmartClient框架组件介绍
Jsp页面引入smartClient类库：
<SCRIPT SRC=isomorphic/system/modules/ISC_History.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=isomorphic/skins/SilverWave/load_skin.js></SCRIPT>
一、SmartClient常用组件接口说明
SmartClient组件清单列表
组件名称 组件描述
ClassFactory Smartclient组件库类工厂组件，用于定义smartclient类
Class Class类是Smartclient组件库类结构树的根类。用于创建类实例，把方法和属性添加到类中。
Timer 定时器组件，用于执行定时任务。
XMLTools Xml工具类
JSON Json工具类
UploadForm 文件上传form组件。
PageListGrid 表格分页组件。
TreeGrid 资源树组件。
Datasouce 数据源组件。
Record 数据源记录组件
DataSourceField 数据源字段组件
OperationBinding 数据源数据绑定对象
RpcManager 远程调用管理组件。
RPCRequest 远程调用参数组件。
RPCResponse 远程调用返回值组件。
Canvas 界面可视化组件父类
Layout 布局组件父组件。
VLayout 垂直布局组件。
Hlayout 水平布局组件
TabSet 标签页布局组件。
Window 窗口布局组件
Menu 菜单。
MenuItem 菜单项
MenuButton 菜单按钮
HTMLPane html区域
Img 图片
Label 标签
IButton 按钮。
ToolStrip 工具栏。
DynamicForm 表单布局组件。
FormItem 表单项父组件。
FormItemType 表单项类型和常用子组件介绍
ListGrid 列表组件。
ListGridField 列表字段组件
TreeGrid 树表格组件。
Tree 树组件。
TreeNode 树节点
SecurityUtil 鉴权组件
ConfigUtil 个性化定制接口
HttpRequestUtils 工具类
GraphPie 饼图组件
GraphBar 柱状图组件
GraphLine 折线图组件
GraphMeter 仪表盘组件
GraphBarVsLine 柱状/折线合并组件
组件描述<模板>
组件属性、方法清单
属性 名称/描述
属性名：类型 属性的描述。例如：
title: String 文本标题
width:Number 组件宽度
urls: Array[String] 资源描述符
configInfo:Object 配置信息。包括以下属性：
action:String请求服务端servlet的url
width: Number组件宽度
方法 名称/描述
方法名 方法的描述。对于自定义组件
例如：
defineClass 创建一个smartclient类。通过该类的create()方法可以创建一个类的实例。
Class defineClass (className[, superClass])
decode 将json字符串反序列化为对象
Object decode (jsonString:String)
removeItems 从窗体区域中删除一批组件。
Array removeItems (items)
参数:
items -类型: Array[canvases ]被删除的一批组件
返回值:
类型: Array –被删除的一批组件。
newInstance方法(详细描述)
详述
方法名 newINstance
概述 用给定的类名称字符串，创建一个该类的实例。
返回 Object：一个新创建的对象。
参数 参数 说明
className:String 类名字
Props1:Object (可选) 要设置到类实例上的属性1。
Props2:Object(可选) 要设置到类实例上的属性2。
使用示例
varmyclassObj=isc.ClassFactory.newInstance(“MyClass”,{name:“zongying”});
ClassFactory:类工厂组件
Smartclient组件库类工厂组件，用于定义smartclient类。
组件属性、方法清单
方法 名称/描述
defineClass 创建一个smartclient类，通过该类的create()方法可以创建一个类的实例。
Class defineClass (className[, superClass])
newInstance 用给定的类名称字符串，创建一个该类的实例。
ClassInstance newInstance (className[, props, props2, props3])
getClass 用给定的类名称字符串，创建一个类。注意，是类而不是类的实例。
Class getClass (className:Sting)
defineClass 方法
详述
方法名 defineClass
概述 定义一个smartclient类。
后续通过该类的create()方法可以创建实例。
返回 Class:一个新的类。
参数 参数 说明
className:String 类名字
superClass:Class (可选) 当前类继承的父类名。该参数可选。
使用示例
ClassFactory.defineClass(“AosTreeGrid”,TreeGrid);
newInstance方法
详述
方法名 newINstance
概述 用给定的类名称字符串，创建一个该类的实例。
返回 ClassInstance：一个新创建的类实例对象。
参数 参数 说明
className:String 类名字
Props1:Object (可选) 要设置到类实例上的属性1。
Props2:Object(可选) 要设置到类实例上的属性2。
使用示例
varmyclassObj=isc.ClassFactory.newInstance(“MyClass”,{name:“zongying”});
Class：类组件
Class类是Smartclient组件库类结构树的根类。用于创建类实例，把方法和属性添加到类中。
组件属性、方法清单
方法 名称/描述
addClassProperties 给类添加静态属性和方法。
void addClassProperties ([arguments 0-N])
addProperties 给类添加实例属性和方法。
void addProperties ([arguments 0-N])
create 创建一个smartclien类的实例。
Object create() ([arguments 0-N])
delayCall 延迟调用本类的某个方法
String delayCall (methodName:String[, arrayArgs:Array, time:Number])
logInfo 打印info级别的信息
void logInfo (message:String[,category:String])
logDebug 打印debug级别的信息
void logDebug (message:String[,category:String])
getStackTrace 取得当前线程执行堆栈。堆栈是以字符串形式返回
String getStackTrace ()
echo 将某个smartclient对象的信息放到一个字符串中，便于后续打印输出
String echo() (obj:Object)
addClassProperties方法
详述
方法名 addClassProperties
概述 给类添加静态属性和方法。
返回 无。
参数 参数 说明
参数: 0-N (可选) 一个或多个类属性或类方法。
使用示例
TimeCounter.addClassProperties({
name:‘logname1’,
setTag:function(tag){
……
}
});
addProperties方法
详述
方法名 addProperties
概述 给类添加实例属性和方法。
返回 无。
参数 参数 说明
参数 0-N (可选) 一个或多个类属性或类方法。
使用示例
TimeCounter.addProperties({
statTime:0,
endTime:0,
tag:"",
start:function(){
this.statTime=newDate();
this.endTime=this.statTime;
if(this.isNotfilter()){
TimeCounter.log.info(this.tag+" begin…");
}
returnthis;
},
});
create方法
详述
方法名 create
概述 创建一个smartclien类的实例。
返回 Object:一个新的类实例。
参数 参数 说明
使用示例
ClassFactory.defineClass(“AosTreeGrid”,TreeGrid);
AosTreeGrid.create();
delayCall 方法
详述
方法名 delayCall
概述 延迟调用本类的某个方法。
返回 无。
参数 参数 说明
methodName:String 一个或多个类属性或类方法。
arrayArgs:Array（可选） 调用参数数组
time:Number（可选） 延迟调用事件，单位微秒。
使用示例
var node = treeData.findById(idRelative);
treeGrid1.delayCall (‘deselectRecord’, [node], 200);
echo 方法
详述
方法名 echo
概述 将某个smartclient对象的信息放到一个字符串中，便于后续打印输出
返回 String:当前smartclient对象的信息。
参数 参数 说明
object:Object 某个smartclient对象
使用示例
arbutton1=Button.create({
left:200,
top:20,
width:150,
title:“setContents(‘goodbye’)”,
click:function(){
//打印当前调用堆栈
varstr=this.getStackTrace(null,null,null,true);
isc.Log.logInfo(str);
//打印当前对象属性
str=isc.Log.echo(button1);
isc.Log.logInfo(str);
}
});
二、界面布局
SmartClient主要常用水平布局（HLayout）、垂直布局（VLayout）等布局方式。
水平布局代码示例：
isc.HLayout.create({
Width:200,//指定宽度
Members:[//指定成员组成
isc.Label.create({
showResizeBar=“true”///组件显示手动改变宽度bar
contents: " red “,//组件标题
backgroundColor=“red”,//背景颜色
align: “center”//标题对齐方式
});
isc.Label.create({
contents: " blue”,//组件标题
backgroundColor=" blue"//背景颜色
align: “center”//标题对齐方式
})]
});
效果图：
垂直布局代码示例：
isc.VLayout.create({
Width:200,//指定宽度
Members:[//指定成员组成
isc.Label.create({
showResizeBar=“true”///组件显示手动改变宽度bar
contents: " red “,//组件标题
backgroundColor=“red”,//背景颜色
align: “center”//标题对齐方式
});
isc.Label.create({
contents: " blue”,//组件标题
backgroundColor=" blue"//背景颜色
align: “center”//标题对齐方式
})]
});
效果图：
三、菜单
Menu：
菜单类(Menu)实现互动式菜单控件,并可选配图标,子菜单和快捷键,通常用于表格和树的右键菜单，和工具栏的下拉菜单。
组件属性、方法清单
Menu继承至ListGrid所以拥有ListGrid的所有方法和属性
属性 名称/描述
data: Array[menuItem] 指定菜单的菜单项
defaultWidth:Number 指定菜单项的缺省宽度
items:Array[MenuItem] 同 Menu.data
showIcons:Boolean 是否显示图标
showKeys:Boolean 是否显示快捷键
emptyMessage :String 当没有菜单项的时候需要显示的信息
cellHeight:Number 菜单项的单元高度
cellPadding:Number 菜单项外围填充宽度
target:Canvas 可选目标画布的这个菜单。可作为一个参数来动态菜单项配置方法如MenuItem.checkIf()。
baseStyle：String CSS style for a normal cell
showSubmenus：Boolean 一个布尔值,指示是否应该显示子菜单指示列。
submenuDirection:String 该子菜单出现在我们的左边或右边。能有效被设置为“左”或“右”
iconWidth：Number 默认的宽度应用到自定义图标在这个菜单。
iconHeight：Number 默认高度适用于自定义图标在这个菜单.
方法 名称/描述
setData 设置在菜单中需要显示的菜单项
void setData (items：Array[MenuItems])
itemClick 当菜单被用户点击的时候该方法将为被执行
Boolean itemClick (item:Object[, colNum:Number])
showContextMenu 显示上下文菜单
Boolean showContextMenu ()
setItems 同Menu的setData方法
void setItems (items：Array[MenuItems])
hideContextMenu 隐藏上下文菜单
void hideContextMenu ()
getItem 获取指定的菜单项对象
MenuItem getItem (item:Number)
setItemProperties 设置指定菜单项的属性
void setItemProperties (item:Number, properties)
getItems 获取Menu的所有MenuItem对象
Array[MenuItem] getItems ()
getItemNum 根据MenuItems对象获取下标
Number getItemNum (item: MenuItem)
showSubmenu 显示指定菜单项的子菜单
void showSubmenu (item: MenuItem)
getSubmenu 获取指定菜单项的子菜单
Menu getSubmenu (item: MenuItem)
setItemEnabled 设置指定菜单项的使能状态
Boolean setItemEnabled (item:MenuItem[, newState:Boolean])
setItemChecked 设置指定菜单项的选中状态
Boolean setItemChecked (item: MenuItem [, newState: Boolean])
setItemTitle 设置指定菜单项的标题
Boolean setItemTitle (item:MenuItem, newTitle:String)
setItemIcon 设置指定菜单项的图标
Boolean setItemIcon (item:MenuItem, newIcon:String[, newDisabledIcon:String])
使用实例：
Menu.create({//菜单项的创建
ID:“imageMenu”,
autoDraw:false,
cellHeight:18,//设置菜单项高度
menuButtonWidth:60,//设置菜单项宽度
data:[//菜单项数据源，显示
{title:“Visible”},
{title:“Reset”,keys:{keyName:“R”, shiftKey:true},keyTitle:“Shift+R”,click:“say(‘1212’)”}],//设置快捷键
title:“Image”//菜单显示名称
});
Menu.create({
ID:“sizeMenu”,
autoDraw:false,
cellHeight:18,
menuButtonWidth:60,
data: [
{title:“Small”},
{title:“Medium”},
{title:“Large”}
],
title:“Size”
});
Menu.create({
ID:"positionMenu",
autoDraw:false,
cellHeight:18,
menuButtonWidth:60,
data:[
{title:"Up", click:"say('aaaa')", keys:"U"},//菜单快捷键设置
{title:"Right", click:"moveRight()", keys:"K"},
{title:"Down", click:"moveDown()", keys:"J"},
{title:"Left", click:"moveLeft()", keys:"H"}
],
title:"Position"
});
Menubar.create({//创建菜单栏
ID:"menuBar",
autoDraw:false,
backgroundColor:"#CCCCCC",
menus:[imageMenu, sizeMenu, positionMenu]//菜单条添加菜单项
});
VStack.create({//创建显示面板
top:200, left:50, width:500,
members:[menuBar]//面板添加菜单条
});
MenuItem：菜单项组件
组件属性、方法清单
MenuItem继承至ListGridRecord所以拥有ListGridRecord的所有方法和属性
属性 名称/描述
checked : Boolean 是否被选中
enabled : Boolean 可否可用
icon ：String 图片的url
iconHeight ：Number 图片的高度
iconWidth ：Number 图片的宽度
isSeparator ：Boolean 是否是分隔符
keys ：String 指定菜单的快捷键
submenu ：Menu 指定子菜单
title ：HTML 指定标题
方法 名称/描述
action 触发菜单的点击事件
void action ()
click 菜单的东西响应函数，当菜单被点击的时候该方法会被调用
void click (target:Canvas, item:MenuItem, menu:Menu[, colNum:Number])
click方法
详述
方法名 click
概述 当菜单被用户点击的时候，该方法就会被执行
返回 Menu对象
参数（可以是菜单组件的任意一个属性） 参数 说明
target : Canvas 菜单所在的组件
item : MenuItem 被点击的菜单项
menu : Menu 被点击菜单项所属的菜单
colNum : Number（可选） 菜单项的编号
使用示例
var menu = Menu.create({
showIcons : false,
data: [{title: “当前告警时候监控”,
enabled: true,
click: function(target,item,menu ){
//do something
}
}]
});
MenuButton：菜单按钮组件
MenuButton类是Button的子类，可以弹出下拉菜单的按钮组件
组件属性、方法清单
MenuButton是Button的子类，继承Button的所有方法和属性
属性 名称/描述
height ：Number 指定按钮高度
menu ：Menu 指定按钮的弹出菜单
showMenuBelow ：Boolean 指定弹出菜单的方向，为true想下弹出，为false想上弹出
title ：String 按钮的标题
四、Img，Label，IButton组件，ToolStrip工具栏
IMG
组件属性、方法清单
属性 名称/描述
imageHeight : Integer 图片的高度
imageWidth : Integer 图片的宽度
imageType : ImageStyle 设置图片的类型，缺省类型是stretch
name : String 设置组件在html中的name属性
showTitle : Boolean 是否显示标题
size : Number 设置图片的高和宽为指定的值
src : SCImgURL 设置图片的url
usePNGFix : Boolean 设置是否需要在IE浏览器中进行对png图片修正
方法 名称/描述
resetSrc 重新加载图片
void resetSrc ()
setImageType 设置图片的类型
void setImageType (imageType：ImageStyle )
setSrc 设置图片的url
void setSrc (URL)
使用实例
Img.create({
left:“20%”,//图片距离当前浏览器左部位置：也可以是数字(单位px)
border:“1px solid gray”,//图片边框样式设置
imageType: “center”,//图片显示位置
src:"<%=path%>/images/login.jpg"//图片路径
});
Label：
一个可以用来显示图片加文字的组件
组件属性、方法清单
属性 名称/描述
Align: Alignment 文本显示的位置，缺省值为“left”
autoFit : Boolean 是否需要根据内容自动调整组件大小
icon : SCImgURL 指定图片的url
iconAlign : String 指定图片显示的位置，可以是“right”或“left”
iconHeight : Integer 设置图片的高度，缺省为图片的原始高度
iconSize : Integer 设置图片的高和宽
iconSpacing : Integer 设置图片的四周的填充宽度
iconWidth : Integer 这边图片的宽度
wrap : Boolean 当文本显示不小的时候，是否需要自动换行
方法 名称/描述
setContents 设置需要显示的文本内容
void setContents (newContents:String)
setIcon 设置需要显示的图片的url
void setIcon (icon:Url)
IButton：按钮
组件属性、方法清单
属性 名称/描述
actionType : SelectionType 按钮的类型，可以是“button”, “radid”, “checkbox”
align : Alignment 指定按钮标题的位置，缺省为“center”
capSize : Number How big are the end pieces by default
hiliteAccessKey : Boolean 如果标题中包括有快捷键盘，是否需要给快捷键加下划线
icon : SCImgURL 设置图片的url。
iconAlign : String 设置图片的位置。
iconHeight : Integer 设置图片的高。
iconSize : Integer 设置图片的宽和高
iconSpacing : Integer 设置图片四周的填充宽度
iconWidth : Integer 设置图片的宽
radioGroup : String 分组标示
selected : Boolean 是否选中
showDisabled : Boolean 在组件不可用的时候是否需要显示状态的改变
showDisabledIcon : Boolean 当按钮不可用的时候，是否需要显示不可以用的图片
showDown : Boolean 当按钮不点击的时候，是否需要显示被按下去的状态
showDownIcon : Boolean 如果使用一个图标为这个按钮,是否切换图标图像当鼠标向下的按钮。
showFocus : Boolean Should we visibly change state when the canvas receives focus? Note that by default the over state is used to indicate focus.
showFocused : Boolean Should we visibly change state when the canvas receives focus?
showFocusedIcon : Boolean If using an icon for this button, whether to switch the icon image when the button receives focus.
showRollOver: Boolean Should we visibly change state when the mouse goes over this object?
showRollOverIcon : Boolean If using an icon for this button, whether to switch the icon image on mouse rollover.
showSelectedIcon : Boolean If using an icon for this button, whether to switch the icon image when the button becomes selected.
showTitle : Boolean Determines whether any specified title will be displayed for this component.
src : SCImgURL Base URL for the image. By default, StretchImgButtons consist of three image parts: A start image (displayed at the top or left), a scalable central image and an end image displayed at the bottom or right.
state : State Current “state” of this widget. StatefulCanvases will have a different appearance based on their current state.
title : String The text title to display in this button.
titleStyle : CSSStyleName CSS style applied to the title text only. Defaults to StretchImgButton.baseStyle when unset.
valign : VerticalAlignment Vertical alignment of this component’s title.
vertical : Boolean Default is a horizontal button. Vertical StretchImgButtons are allowed, but title text, if any, will not be automatically rotated.
wrap : Boolean Should the title for this button wrap? If unset, default behavior is to allow wrapping if this.vertical is true, otherwise disallow wrapping
方法 名称/描述
action 触发按钮点击事件
void action ()
addToRadioGroup 指定按钮的分组id
void addToRadioGroup (groupID：String)
deselect 去选中
void deselect ()
getActionType 获取按钮类型
void getActionType ()
getState 获取按钮状态
State getState ()
getTitle 获取按钮标题
String getTitle ()
iconClick 按钮图标是否支持点击
Boolean iconClick ()
isSelected 按钮是否选中
Boolean isSelected ()
removeFromRadioGroup 移除分组
void removeFromRadioGroup ([groupID：String])
select 选中按钮
void select ()
setActionType 设置按钮类型
void setActionType ()
setDisabled 设置按钮的使能状态
void setDisabled (disabled：Boolean)
setIcon 设置按钮图标
void setIcon (icon：url)
setTitle 设置按钮标题
void setTitle (newTitle)
create方法
详述
方法名 Create
概述 通过输入设置的各个属性创建对应的按钮
返回 菜单
参数（可以是菜单组件的任意一个属性） 参数 说明
width:N 设置按钮宽度
disabled:Boolean 是否灰化
action:function 按钮动作响应
title:String 按钮标题
使用示例
isc.IButton.create(
{
width: 75,
autoDraw : true,
disabled:false,
action:function(){
//do action
},
title: “abc”,
});
Isc.Button.create({
title:“重置”,//按钮显示字符
width:“100”,//按钮的宽度
top:“60%”,//按钮距离当前浏览器顶部位置：也可以是数字(单位px)
left:“55%”,//按钮距离当前浏览器左部位置：也可以是数字(单位px)
click:function(){//按钮的点击发生的事件
}
});
ToolStrip：工具栏
ToolStrip是一个工具条容器，可以将各种按钮放到这个容器上构成一个工具条
组件属性、方法清单
属性 名称/描述
formWrapper ：AutoChild DynamicForm instance created by ToolStrip.addFormItem() to contain form items for display in this toolStrip. Each time addFormItem() is run, a new formWrapper autoChild will be created, picking up properties according to the standard AutoChild pattern.
formWrapperConstructor ：String： SmartClient class for generated ToolStrip.formWrapper components.
formWrapperDefaults ：Object Default properties to apply to ToolStrip.formWrapper components.
formWrapperProperties ：Object Properties to apply to ToolStrip.formWrapper components.
height ：Number ToolStrips set a default height to avoid being stretched by containing layouts.
members ：Array[Canvas] Array of components that will be contained within this Toolstrip
separatorSize ：Integer Separator thickness in pixels
vertical ：Boolean Indicates whether the components are drawn horizontally from left to right (false), or vertically from top to bottom (true).
方法 名称/描述
addFormItem 添加一个表单到组件上
DynamicForm addFormItem (formItem: FormItem [, formProperties:Object, position:Number])
addMember 添加一个成员到组件上
void addMember (newMember:Canvas[, position:Number])
addMember方法
详述
方法名 addMember
概述 添加一个组件
返回 无
参数 参数 说明
newMember ：Canvas 被添加的组件对象
position ：Number （可选） 新组件的的位置
使用示例
var btn= isc.IButton.create(
{
width: 75,
autoDraw : true,
disabled:false,
action:function(){
//do action
},
title: “abc”,
});
var toolStrip = isc.ToolStrip.create(
{
membersMargin : 5,
width : “100%”,
height : “100%”
});
toolStrip.addMember(btn); //向工具条上添加一个按钮
五、ResourceTreeGrid：资源树组件
资源树组件封装了获取资源树相关信息的功能
组件属性、方法清单
ResourceTreeGrid提供资源相关的数据，现在支持按资源类型过滤，该组件继承自TreeGrid，具有TreeGrid的所有方法。资源树组件的方法：
方法 名称/描述
Create 创建资源树组件，一般组件都是通过这个方法创建实体对象
fetchData 查询资源数据，条件参数为JSON对象，比如根据资源类型和用户名查询：fetchData({moc:[“Virtual Ne”, “Common Group”], userName:“admin”});
资源树节点的属性：
方法 名称/描述
locateId 资源树在树上的位置ID，为主键
parentLocateId 资源树在树上父节点ID，指明外键
oid 资源编号
name 资源名字
ipAddress 网元ip地址，该属性可能为空，只有网元才有此属性
location 资源所在位置，该属性可能为空
connectionState 资源连接状态，该属性后续在界面是以状态小图标的方式呈现
managementState 资源管理状态，该属性后续在界面是以状态小图标的方式呈现
workState 资源工作状态，该属性是一个数组
visible 资源可见状态，如果为false，资源不能在界面显示
movable 资源可移动状态，如果为false资源不能在树上移动位置
timeZone 资源时区
description 资源描述，该属性可能为空
create方法
详述
方法名 Create
概述 通过输入设置的各个属性创建对应的资源树
返回 资源树的实体对象
参数（可以是树组件的任意一个属性） 参数 说明
ID 树组件的ID
rowContextClick 设置节点右键响应事件
recordClick 设置节点单击事件
recordDoubleClick 设置节点双击事件
使用示例
示例一：
ResourceTreeGrid.create({
ID:“resourceTree”,
left:50, top:50, width:300, height:500,
rowContextClick : function( record ) //设置右键事件
{
this.contextMenu = Menu.create({
width : 100,
data:[{
title : “刷新”,
resourceTreeGrid : this,
icon : “uep-2/unacknownledge.gif”,
click : function()
{
this.resourceTreeGrid.data.reloadChildren(record);
}
}]});
this.showContextMenu();
},
recordClick: “isc.say(‘clicked country: ‘+record. name +’’)”, //设置单击事件
recordDoubleClick: “isc.say(‘Double-clicked country: ‘+record. name +’’)” //设置双击事件
});
fetchData方法
详述
方法名 fetchData
概述 根据条件对资源树进行查询
返回 根据条件对资源树进行查询的结果
使用示例
根据资源类型即moc的值和当前登录的用户名进行资源查询：
resourceTree.fetchData({moc:[“Virtual Ne”, “Common Group”], userName:“admin”});
六、HTMLPane：
HTMLPane组件可以用来显示html内容，如果html内容很多，组件将会提供滚动条
效果图
组件属性、方法清单
属性 名称/描述
contentsURL : URL 组件需要显示的html的URL
contentsType : String 显示html的方式
contentsURLParams : Object 组件需要显示的html的URL的参数
dynamicContents : Boolean
Dynamic contents allows the contents string to be treated as a simple, but powerful template. When this attribute is set to true, expressions of the form ${arbitrary JS here} are replaced by the result of the evaluation of the JS code inside the curly brackets. This evaluation happens at draw time. If you want to trigger a re-evaluation of the expressions in the contents string you can call markForRedraw() on the canvas.
evalScriptBlocks If evalScriptBlocks is true, HTMLFlow will pre-process the loaded HTML in order to mimic how the HTML would execute if it were loaded as an independent page or loaded via an IFRAME.
httpMethod : SendMethod Selects the HTTP method that will be used when fetching content. Valid values are “POST” and “GET”.
loadingMessage : HTML HTML to show while content is being fetched,
方法 名称/描述
contentLoaded 当组件的内容加载完成后该方法会被触发
void contentLoaded ()
handleError 当组件加载的内容加载错误的时候该方法会被调用
Boolean handleError (rpcRequest：RPCRequest,rpcResponse：RPCResponse )
loadingContent 当组件正在从服务端加载内容的时候该方法返回true
void loadingContent ()
setContentsURL 设置组件内容的url
void setContentsURL ([url, params])
transformHTML 覆盖该方法可以对加载的html内容进行修改后再显示
void transformHTML (html)
七、UploadForm：文件上传组件
文件上传组件。
效果图
组件属性、方法清单
属性 名称/描述
action:String 请求服务端servlet的url
width: Number 组件宽度
方法 名称/描述
create 创建组件。
UploadForm create (configInfo:Object)
onSuccess 上传成功时的回调方法。
void onSuccess (fileName:String)
onFailed 上传失败时的回调方法。
void onFailed (fileName:String)
create方法
详述
方法名 create
概述 创建组件。
返回 UploadForm：新创建的组件实例。
参数 参数 说明
params：Object 参数对象，包括以下属性：
action:String请求服务端servlet的url
width: Number组件宽度
使用示例
var uploadForm = isc.MyUploadForm.create({
width:“100%”,
showTitle:true,
action:"/servlets-examples/upload",
cellPadding:2,//元素内补丁
cellSpacing:2 ,//元素间间隙
onSuccess:function(filename){
this.Super(“onSuccess”, arguments);
//isc.say(“onSuccess:function”+filename);
},
onFailed:function(filename){
this.Super(“onSuccess”, arguments);
//isc.say(“onFailed:function”);
}
});
八、PageListGrid：表格分页组件
对表格组件进行简单封装，对表格提供分页功能。
效果图
组件属性、方法清单
PageListGrid提供表格分页的功能，能够向表格分页按钮所在工具栏增加各种工具按钮
方法 名称/描述
Create 创建分页表格，一般组件都是通过这个方法创建实体对象。
getToolBar 获取允许应用自定义的工具栏对象。
fetchInitData 从服务端获取表格分页组件的数据内容。
create方法
详述
方法名 Create
概述 通过输入设置的各个属性创建对应的表格组件
返回 表格的实体对象
参数（可以是表格的任意一个属性） 参数 说明
fetchDataURL:URL 获取第一页数据的URL串，如："/a1-web/rest/log/cmdLog"
fetchPageDataURL：URL 获取分页信息的URL串,如："/a1-web/rest/log/cmdLogPageInfo"
fields:Array[DataSourceField] 表头字段对象列表。
toolbar: Canvas 允许应用自定义的工具栏对象，如：效果图中“查询条件“、”刷新“、”导出按钮“所在工具栏。
height 表格分页高度
width 表格分页宽度
使用示例
isc.PageListGrid.create({
fetchDataURL:"/a1-web/rest/log/cmdLog",
fetchPageDataURL:"/a1-web/rest/log/cmdLog",
fields: this.getDataFields(),
toolbar: this.logToolBar,
height: “100%”,
width: “100%”,
layoutMargin: 0,
membersMargin: 0
});
Toolbar例子：
varbt=isc.IButton.create({
title:com_log_refrech_title,
click:function(){
}
});
varlayout=HLayout.create({
width:“100%”,
height:“100%”,
layoutTopMargin:8,
membersMargin:5,
margin:0,
members:[bt]
});
fields例子：
securityLogFileds:[
{
name:“xxx”,
title:“xxx”,
align:“center”,
cellAlign:“left”,
width:120
},
}]
getToolBar方法
详述
方法名 getToolBar
概述 返回分页按钮所在的工具栏
返回 返回分页按钮所在的工具栏
使用示例
This.pageListGrid.getToolBar();
fetchInitData方法
详述
方法名 fetchInitData
概述 从服务端获取表格分页组件的数据内容。
返回 无。
参数（可以是表格的任意一个属性） 参数 说明
Criteria：json json格式的查询条件，例如：{data:{“userName”:“admin”,“connectMode”:“WEB”}}
Callback1: function 在当前页返回后，所回调的应用自定义的方法。
Callback2: function 在分页信息返回后，所回调的应用自定义的方法。
九、列表（ListGrid，TreeGrid）
ListGrid：数据列表组件
效果图：
属性清单
属性 名称/描述
属性名：类型 属性的描述。例如：
autoFetchData : Boolean 如果设置为true，组件第一次创建的时候，就会调用this.fetchData()方法。
autoSaveEdits : Boolean 如果组件是可以编辑的，当用户编辑组件时，是否自动保存编辑属性。
booleanFalseImage : string 显示checkbox field的false图标
booleanTrueImage: string 显示checkbox field的true图标
booleanPartialImage ：string 显示checkbox field的半选
canAcceptDroppedRecords ：boolean 是否可以拖动一条记录到该组件里面
canDragRecordsOut：boolean 是否可以从该组件拖出一条记录
canEdit ：boolean 提示组件是否可以编辑
canSelectAll ：boolean 组件的header是否显示选择所有的图标，适用于checkbox field。
canSort ：boolean 表头排序
data ：[object] listGridRecord数组，组件自动监听data数据变化，并且自动重画。
dataPageSize ：Integer 适用于组件分页，每页记录条数
dataSource ：[dataSource or ID] 组件配置的数据源，参考数据源配置章节
editByCell ：Boolean 组件时按行编辑还是按具体某个cell进行编辑
Fields：[ListGridField] 组件显示的列表数组对象
selectionAppearance ：string 列表呈现方式
包括： rowStyle和checkbox两种类型
selectionProperty ：string 标识组件记录是否选中，默认值：isSelect
selectionType : string 定义组件的select行为，
包括四种：none、single、mutiple、simple
showHeader：boolean 显示列表的标题
showHeaderContextMenu ：boolean 显示列表标题的上下文菜单
showSelectedStyle ：boolean 显示被选择时候的样式
方法清单
方法 名称/描述
方法名 方法的描述
addData 添加一条记录。
addData (newRecord[, callback, requestProperties])
参数：rewRecord：要添加的记录（必选）
Callback：添加完成后的回调函数（可选）
requestProperties： 其他参数说明（可选）
cellClick 单击事件
cellClick (record, rowNum, colNum)
cellContextClick 右键菜单
cellContextClick (record, rowNum, colNum)
cellDoubleClick 双击事件
cellDoubleClick (record, rowNum, colNum)
dataArrived 新的记录即将显示在组件里面的时候触发
deselectAllRecords 取消选择所有记录
deselectRecord 取消选择指定记录
deselectRecord (record)
参数：record记录对象或者ID
fetchData 从当前指定的数据源获取数据。
fetchData ([criteria, callback, requestProperties])
参数说明：
Criteria：json对象，表示要查询的规则条件。
Callback： 回调函数。
requestProperties： 其他参数说明。
getAllFields 查询所有的field对象
返回：field数组对象
getField 查询指定field对象
参数：
colNum - field ID
getRecord 查询指定的记录
getRecord (recordNum) ，参数：
recordNum ：行号或者记录的ID
返回：记录对象
getSelectedRecord 查询选中的记录，如果选中多条则返回第一条
getSelection 查询所有选择的记录
getTotalRows 查询记录总行数
headerClick 标题触发事件
headerClick (fieldNum) ，参数：
fieldNum ： 列号或者field ID
isSelected 查询当前记录是否选中
markForRedraw 标识当前组件需要重绘
recordClick 单击事件
recordClick (viewer, record, recordNum, field, fieldNum, value, rawValue)，参数：
viewer：当前事件的ListGrid组件
record：当前记录
recordNum：记录号
field：当前事件的field
value： 当前事件cell的值
rowValue：当前事件cell之前的值
removeData 从当前组件移除一条记录
void removeData (data[, callback, requestProperties])
参数：
Data：记录或者记录的主键ID
Callback：回调函数
requestProperties：其他参数说明
removeSelectedData 移除选中的记录
void removeSelectedData ([callback, requestProperties])
selectAllRecords 选中所有记录
selectionChanged 记录选中时候触发事件
void selectionChanged (record, state)
参数：
record：选中的记录
State：选中的状态，true或者false
selectRecord 选中指定记录
void selectRecord (record[, newState])
参数：
record :记录对象或者ID
newState :选中状态，true或者false
setFields 设置组件的fields对象
transferDragData 将指定的记录从当前组件拖动到另一个组件
transferSelectedData 将选中的记录从别的组件传输到当前组件
transferSelectedData (source[, index, callback])
参数说明：
Source： DataBoundComponent 将要传输的源组件（必选）
Index：当前组件需要插入的位置
Callback：回调函数
updateData 更新指定记录
void updateData (updatedRecord[, callback, requestProperties])
参数说明：
参数：updatedRecord：需要更新的记录（必选）
Callback：添加完成后的回调函数（可选）
requestProperties： 其他参数说明（可选）
create方法
方法一 Create
概述 通过输入设置的各个属性创建对应的ListGrid组件
返回 列表组件实体对象
参数（可以是表格的任意一个属性） 参数 说明
width/heigth 设置组件的宽度和高度
dataSource 设置组件的数据源
autoFetchData 创建时是否自动获取数据，设为false
recordDoubleClick 鼠标双击事件
fetchData 使用该方法从服务端获取数据，与数据源绑定
fields 列表组件标题栏，支持排序、列定制等功能
canEdit 设置是否可以编辑
data 列表数据，一般测试时使用，开发时都是通过数据源从服务端获取数据
editByCell 按照cell的方式编辑一行数据
showSelectedStyle 当一行数据被选中是是否显示选中样式
使用示例：
例1：
isc. ListGrid.create({
ID: “employeeList”,
dataSource: employees,
autoFetchData: false,
width: 500,
height: 400,
recordClick: “isc.say(‘clicked country: ‘+record.Name+’’)”, //设置单击事件
recordDoubleClick: “isc.say(‘Double-clicked country’)”, //设置双击事件
contextMenu: gridMenu ---------设置右键菜单
});
例2：
var animalFields = [//name表示列头控件名称，title表示控件的标签名称
{name:“commonName”,title:“Animal”},
{name:“scientificName”,title:“Sci .Name (not editable)”, width:150},// width表示控件的宽度
{name:“diet”,title:“Diet”},
{name:“information”,title:“Interesting Facts”}
]
ListGrid.newInstance/create({
ID:“animalList”,//定义gridID（可以使其他grid组件使用）
canEdit:true,//设置是否可编辑
fields:animalFields,//grid中包含的控件（上面的变量即是）
left:50, //grid距离当前浏览器左部位置
top:275, //grid距离当前浏览器顶部位置
width:500, //grid宽度
height:500, //grid高度
data:””//显示的数据，数据的名称要和fields里面的name值相同
dataSource:’’//显示的数据，格式可以是json或者xml格式的
dataPageSize: 50//表示分页显示一页最多显示的条数
autoFetchData:true//表示页面打开时是否自动加载数据：可以与DataSource一起使用
});
fetchData方法
方法名 fetchData
概述 根据条件对ListGrid列表进行查询
返回 根据条件对ListGrid列表进行查询的结果
使用示例：
userList.fetchData({},function(){
isc.say(‘hahah’)});
addData方法
方法一 addData
概述 通过输入设置的各个属性创建对应的ListGrid组件
返回 列表组件实体对象
参数 说明
newRecord Object对象，需要添加的数据记录
callback 消息返回后的回调函数
removeData方法
方法一 removeData
概述 删除ListGrid组件对应的一条记录
返回 列表组件实体对象
参数 说明
data Record或者record对应的主键ID
callback 消息返回后的回调函数
使用示例：
A1_SmUserSessionTable.removeData({sessionID : sessionid});
updateData方法
方法一 updateData
概述 更新ListGrid组件某一条记录
返回 列表组件实体对象
参数 说明
updatedRecord Object对象
callback 消息返回后的回调函数
TreeGrid：树列表组件
效果图
方法属性清单：
create方法
方法名 Create
概述 通过输入设置的各个属性创建对应的TreeGrid组件
返回 列表组件实体对象
参数（可以是表格的任意一个属性） 参数 说明
width/heigth 设置组件的宽度和高度
dataSource 设置组件的数据源
autoFetchData 创建时是否自动获取数据，设为false
recordDoubleClick 鼠标双击事件
fetchData 使用该方法从服务端获取数据，与数据源绑定
fields 列表组件标题栏，支持排序、列定制等功能
showPartialSelection 支持半选功能
selectionType 支持只能选中一个节点、可以选中多个节点、不能选中三种类型
isSelected 判断节点是否被选中
selectionAppearance 支持checkbox和rowStyle两种类型
使用示例：
isc.TreeGrid.create({
width :“100%”,
ID :“a1_user_black_alluser_tree”,
showOpenIcons :false,
loadDataOnDemand:false,
showDropIcons :false,
showSelectedStyle :true,
selectionType :“single”,
showConnectors:true,
autoFetchData :false,
border :“1px solid #C0C3C7”,
fixedFieldWidths :false,
showHeader :false,
canReorderRecords:true,
dragDataAction:“copy”,
fields: [{
name:“nodeName”
}],
dataSource : com_smDataSource.getUserDepartmentDataSource()
});
fetchData方法
方法名 fetchData
概述 根据条件对TreeGrid列表进行查询
返回 根据条件对TreeGrid列表进行查询的结果
使用示例：
userList.fetchData({},function(){
isc.say(‘hahah’)});
addData方法
方法一 addData
概述 通过输入设置的各个属性创建对应的TreeGrid组件
返回 列表组件实体对象
参数 说明
newRecord Object对象，需要添加的数据记录
callback 消息返回后的回调函数
removeData方法
方法一 removeData
概述 删除TreeGrid组件对应的一条记录
返回 列表组件实体对象
参数 说明
data Record或者record对应的主键ID
callback 消息返回后的回调函数
使用示例：
A1_SmUserSessionTable.removeData({sessionID : sessionid});
updateData方法
方法一 updateData
概述 更新TreeGrid组件某一条记录
返回 列表组件实体对象
参数 说明
updatedRecord Object对象
callback 消息返回后的回调函数
十、Tree：树组件
效果图
属性清单：
方法名
概述 Tree组件通过TreeGrid.data的方式呈现
返回 列表组件实体对象
参数（可以是表格的任意一个属性） 参数 说明
autoOpenRoot 布尔类型，如果为true，当树被创建后，根节点自动展开
data TreeNode节点列表，创建树是初始化可选数据
parentIdField 指定treenode的parentid名称，默认是parentId
idField 指定treenode的id名称，默认是id
showRoot 是否显示根节点
使用示例：
isc.TreeGrid.create({//树列表组件的创建，显示树
ID: “employeeTree”,
data: isc.Tree.create({//树的创建
modelType: “children”,//树的模型类型
nameProperty: “Name”,//树节点名称来源
childrenProperty: “directReports”,子节点声明名称
root: {EmployeeId: “1”, directReports: [
{EmployeeId:“4”, Name:“Charles Madigen”, directReports: [
{EmployeeId:“188”, Name:“Rogine Leger”},
{EmployeeId:“189”, Name:“Gene Porter”, directReports: [
{EmployeeId:“265”, Name:“Olivier Doucet”},
{EmployeeId:“264”, Name:“Cheryl Pearson”}
]}
]}
]}
}),
// customize appearance
width: 500,
height: 400,
nodeIcon:“icons/16/person.png”,//节点图标
folderIcon:“icons/16/person.png”,//节点项图标
showOpenIcons:false,
showDropIcons:false,
closedIconSuffix:""
});
employeeTree.getData().openAll();
add方法
方法一 Add
概述 在指定的父节点下添加一个单一的节点
返回
参数 说明
node Treenode节点对象，表示要添加的节点
parent ParentID或者父节点treeNode
position 要添加的位置
findById 方法
方法二 findById
概述 根据节点id查询对应的treeNode节点
返回 指定id的TreeNode节点
参数 说明
id 返回节点的id
getAllNodes 方法
方法三 getAllNodes
概述 获取所有的treeNode节点
返回 所有的treeNode节点
getChildren 方法
方法四 getChildren
概述 获取指定节点的所有孩子节点
返回 指定节点的所有孩子节点
getDescendants 方法
方法五 getDescendants
概述 获取指定节点的所有父亲节点
返回 指定节点的所有父亲节点
getParent 方法
方法六 getDescendants
概述 获取指定节点的父亲节点
返回 指定节点的父亲节点
getRoot 方法
方法七 getRoot
概述 获取根节点
返回 根节点
isFolder 方法
方法八 isFolder
概述 判断该节点是不是目录节点
返回 布尔类型
openAll 方法
方法九 openAll
概述 打开指定节点下面所有节点，不设置参数表示展开根节点所有孩子节点
返回 布尔类型
remove 方法
方法九 remove
概述 删除节点
返回 布尔类型
参数 说明
node treeNode节点，需要删除的节点
十一、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” : “United States”,“CH” : “China”,“JA” : “Japan”,“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”} ]
});
十四、Canvas：画布组件
组件属性、方法清单
属性 名称/描述
accessKey：String 元素的快捷键
autoDraw： Boolean 是否自动绘制，如果为真则在元素被创建出来时就绘制
autoShowParent: Boolean 是否自动显示父元素，如果为真则不管子元素是否绘制都绘制父元素
backgroundColor: String 元素的背景色，可以设置为GRB属性(e.g. #22AAFF) 或者具体的颜色(e.g. red)
backgroundImage: SCImgURL 元素的背景图案。SCImgURL详见下面
backgroundPosition ：String 元素的背景图案位置
Border：String 组件的边框
canAcceptDrop：Boolean 当前对象是否可以接收被移动的元素
canDrag：Boolean 是否可以移动
canDragReposition：Boolean 是否可以拖动到其他地方
canDragResize：Boolean 是否可以拖动大小
canDrop：Boolean 对象可否放在其它元素上，当canDrag或canDragReposition为真时，这个属性才有效
canFocus：Boolean 是否能成为焦点
canHover：Boolean 是否触发hover
Children：Array[Canvas] 画布的子元素
contents：String 画布或标签上的内容
Cursor：Cursor 当鼠标移动到元素上显示的鼠标图案
customEdges：Array[String] 显示组件边框，四边的名字为 (“T”, “B”, “L”, “R”)
defaultHeight：Number 组件的默认高度，可以改变
defaultWidth：Number 组件的默认宽度，可以改变
doubleClickDelay：Number 双击鼠标的间隔时间，单位：msec
dragAppearance ：DragAppearance 拖动时的效果，有none,tracker, target, outline 4种效果。
none：没有效果
tracker：自动显示追踪标记
target：目标组件的移动、大小改变及时显示
outline：显示组件的轮廓大小
dropTypes Array[String] 目标对象接收的拖动对象的类型
dynamicContents：Boolean 为真时，显示计算表达式的值
edgeShowCenter：Boolean
edgeSize：Number 边框的大小，像素
enabled：Boolean 是否置灰，不可用
extraSpace：Number 当前元素在layout中时，与后面元素的空白距离
height：Number 元素高度
hoverAlign：Alignment 鼠标停留时，显示内容的对齐方式center、left、right
hoverDelay：Number 触发hover之前的鼠标保留时间
hoverHeight：measure 鼠标停留时显示的高度
hoverOpacity：Number 鼠标停留时显示的透明度
hoverStyle：CSSStyleName 鼠标停留时显示样式
hoverWidth：measure 鼠标停留时显示的宽度
hoverWrap：Boolean 鼠标停留时内容以一行还是多行显示
ID：String 元素的id
layoutAlign：Alignment 布局中成员的对齐方式，默认水平布局是上对齐，垂直布局是左对齐
left ：Number或String 取得左外边距与包含块之间的偏移
margin：Number 外边距
maxHeight：Number 最大高度
maxWidth：Number 最大宽度
minHeight：Number 最小高度
minWidth：Number 最小宽度
opacity：Number 透明度，在0到100之间，100指不透明
Overflow：Overflow “visible”“hidden”“auto”“scroll” “clip-h”“clip-v”
padding：Number 边框与内容之间的空白
prompt：String 鼠标停留时的提示
scrollbarSize：Number 滚动条的大小
showShadow：Boolean 是否显示阴影
showResizeBar：Boolean
showDragShadow 在拖动时是否显示阴影
animateTime 动画时间
animateFadeTime 动画退去时间
animateHideTime 动画隐藏的时间
animateMoveTime 动画移动的时间，如果没有设置，则以animateTime替代
TAB_INDEX_FLOOR 最小的tab index
方法 名称/描述
draw 在当前页面上绘制所有元素
Canvas draw ()
show 如果画布还没有绘制，则绘制显示
void show ()
addChild 在当前画布上增加一个子元素。
Canvas addChild (newChild[, name, autoDraw])
getById 根据id获取画布
Canvas getById (ID)
initWidget 初始化
void initWidget ([arguments 0-N])
focus 获得焦点的动作
void focus ()
focusChanged 焦点改变的动作
void focusChanged（）
blur 从当前画布上移开焦点，调用这个方法后，画布将停止接收键盘事件
void blur ()
enable 使元素可用
void enable ()
destroy 永久销毁画布及其子元素
void destroy ()
disable 元素及其子元素和兄弟不可用
void disable ()
clear 从画布中移除元素
void clear ()
click 单击鼠标左键时的动作，否则不触发事件
Boolean click ()
doubleClick 双击鼠标时是否执行动作
Boolean doubleClick ()
markForRedraw 标记为重绘，加入到队列中，在一定延时后绘制。
void markForRedraw ([reason])
dropMove 当对象在目标对象中拖动时的动作
Boolean dropMove ()
dropOut 当对象从目标对象上拖出来时的动作
Boolean dropOut ()
dropOver 当对象第一次拖动到目标对象中的动作
Boolean dropOver ()
getBottom 取得下外边距与包含块之间的偏移
Number getBottom ()
getContents 取得内容
HTML getContents ()
getHeight 获取高度
Number getHeight ()
getImage 获取图案
Object getImage（identifier）
identifier - type: String获取图案的名称
getImgURL String getImgURL (URL[, imgDir])
URL - type: String URL路径
imgDir (可选) - type: String
getLeft 取得左外边距与包含块之间的偏移
Number getLeft ()
getOffsetX 取得元素的横坐标位置
Number getOffsetX ()
getOffsetY 取得元素的纵坐标位置
Number getOffsetY ()
getPageBottom 取得相对页面的底坐标
Number getPageBottom ()
getPageLeft 取得相对页面的左坐标
Number getPageLeft ()
getPageRight 取得相对页面的右坐标
Number getPageRight ()
getPageTop 取得相对页面的顶坐标
Number getPageTop ()
getParentElements 获取所有父元素
Array getParentElements ()
getRight 取得右外边距与包含块之间的偏移
Number getRight ()
getWidth 获取宽度
Number getWidth ()
hide 隐藏
void hide ()
hideContextMenu 隐藏上下文菜单
void hideContextMenu ()
hover 鼠标停留时动作，
Boolean hover ()
imgHTML 为一个图片生成HTML
String imgHTML (src[, width, height, name, extraStuff, imgDir])
src - 类型: SCImgURL URL本地路径
width (可选) - 类型: Number
height (可选) -类型: Number
name (可选) -类型: String
extraStuff (可选) -类型: String
imgDir (optional) - type: String 图案的路径
isDirty 画布是否等待被重绘
Boolean isDirty ()
isDisabled 是否不可用，状态时可继承的，任何子元素不可用则该元素不可用
Boolean isDisabled ()
isDrawn 是否已经绘制完成
Boolean isDrawn ()
isEnabled 是否可用
Boolean isEnabled ()
isVisible 是否可见，如果父元素不可见，则子元素不可见
Boolean isVisible ()
keyDown 按下键盘时的执行的动作
Boolean keyDown () [String Method]
为假时不执行
keyUp 松开键盘时的执行的动作
Boolean keyUp () [String Method]
为假时不执行
keyPress 按下和松开键盘时执行的动作
Boolean keyPress ()
为假时不执行
mouseDown 按下鼠标左键的执行的动作
Boolean mouseDown ()
mouseMove 移动鼠标的执行的动作
Boolean mouseMove ()
mouseOut 鼠标离开时执行的动过
Boolean mouseOut ()
mouseOver 鼠标进入时的动过
Boolean mouseOver ()
mouseUp 松开鼠标左键的执行的动作
Boolean mouseUp ()
mouseWheel 鼠标滚动时的动作
Boolean mouseWheel ()
markForDestroy 以超时的方式销毁画布，当线程执行完时销毁画布。
void markForDestroy ()
moveAbove 把元素放在声明的元素之上
void moveAbove (canvas)
moveBelow 把元素放在声明的元素之下
void moveBelow (canvas)
moveBy 把元素了多少像素
Boolean moveBy (deltaX, deltaY)
deltaX - type: Number 水平方向的右位置，负数表示左
deltaY - type: Number 垂直方向的下位置，负数表示上
moveTo 把元素移动到特定位置
Boolean moveTo ([left, top])
left (可选) - 类型: Number or Object当为Number时指横坐标，当为Object时含有left和top属性
top (可选) - 类型: Number
rightMouseDown 鼠标右键的动作
Boolean rightMouseDown ()
bringToFront 把元素放在最上层
void bringToFront ()
sendToBack 把元素放在最下层
void sendToBack ()
setBackgroundColor 设置背景色
void setBackgroundColor (newColor)
setBackgroundImage 设置背景图案
void setBackgroundImage (newImage)
setBorder 设置边框
void setBorder (newBorder)
setBottom 设置元素下外边距与包含块之间的偏移
void setBottom (bottom)
setCanFocus 设置是否成为焦点
void setCanFocus (canFocus) [Advanced]
setContents 设置内容
void setContents ([newContents])
setCursor 设置光标
void setCursor (newCursor)
setDisabled 设置不可用
void setDisabled (disabled) [Advanced]
setEnabled 设置可用
void setEnabled (newState) [Advanced]
setHeight 设置高度
void setHeight (height)
setImage 设置图案
void setImage (identifier, URL[, imgDir]) [Advanced]
setLeft 设置元素左外边距与包含块之间的偏移
void setLeft (left)
setMargin 设置外边距
void setMargin (margin)
setOpacity 设置透明度
void setOpacity (newOpacity)
setOverflow 设置overflow
void setOverflow (newOverflow)
setPadding 设置边框与内容的距离
void setPadding (newPadding)
setPageLeft void setPageLeft (left)
setPageTop void setPageTop (top)
setRight 设置元素右外边距与包含块之间的偏移
void setRight (right)
setTabIndex 设置tab的index
void setTabIndex (tabIndex)
setTop 设置元素上外边距与包含块之间的偏移
void setTop (top)
setWidth 设置宽度
void setWidth (width)
animateResize 动画重绘大小
void animateResize (width, height[, callback, duration, acceleration])
showPrintPreview 生成并显示打印预览视图
void showPrintPreview (components[, printProperties, printWindowProperties, callback, separator])
components - 类型: Canvas 数组
printProperties (可选) - 类型: PrintProperties
printWindowProperties (可选) - 类型: PrintWindow Properties
callback (可选) - 类型: Callback 当打印预览视图生成后触发的回调事件。
separator (可选) - 类型: String 可选的HTML分隔符
show方法
详述
方法名 show
概述 绘制画布。
返回 无。
参数 参数 说明
参数:无 无
使用示例
isc.setAutoDraw(false);
var pm = PmFrameworkLayout.getPerformacnceFrameWork();
pm.show();
addChild
方法名 addChild
概述 增加子元素
Canvas addChild (newChild[, name, autoDraw])
返回 无。
参数 参数 说明
newChild ：Canvas 增加的子元素
Name：String可选 子元素的名字
autoDraw：Boolean 是否立即显示
使用示例
var layout = VLayout.create({
height : “100%”,
width : “100%”,
margin : 0,
overflow : “hidden”
});
this.addChild(layout);
initWidget方法
方法名 initWidget
概述 初始化画布
void initWidget ([arguments 0-N])
返回 无。
参数 参数 说明
arguments ： 初始化参数
使用示例
isc.ThresholdIndexGridPanel.addMethods({
/**
- 重载界面初始化方法
*/
initWidget: function(){
this.padding = 0;
this.layoutMargin = 0;
this.membersMargin = 0;
this.minHeight = 100;
// 调用父类方法
this.Super(“initWidget”, arguments);
// 初始化界面
this._initListGridPanel();
},
十五、TabSet：标签页布局组件
TabSet组件让多个Tab组件可共享一块区域，其中一个Tab页被用户选中后，显示在TabSet组件的区域中。TabSet继承至Canvas。
效果图
组件属性、方法清单
TabSet常用属性如下表所示：
属性：类型 名称/描述
canCloseTabs ：Boolean 是否允许关闭tab页。
canEditTabTitles ：Boolean 是否允许编辑tab的标题。
默认值：false
closeTabIcon ：SCImgURL 关闭按钮的图表。
默认值: [SKIN]/TabSet/close.png
destroyPanes ：Boolean 当移除tab页时，tab页上的pane对象是否释放资源。
默认值: null
paneContainerOverflow ：Overflow ab页pane容器溢出时的策略。
默认值: “auto”
paneMargin ：Integer Tab页pane边缘距离tab边缘的距离。
默认值: 0
showMoreTab ：Boolea 是否显示更多tab页。
默认值: null
tabBar ：AutoChild tabSet中的tabBar对象。
默认值: null
tabBarAlign ：Side TabBar的布局策略。该属性与tabBarPosition 属性配套使用。
当tabBarPosition 为"top" 或者 “bottom”，则该属性只能为"left" 或者"right" ，并且默认值为"left"。
当tabBarPosition 为"left" 或者 “right”，则该属性只能为"top" 或者"bottom" ，并且默认值为"top "。
tabBarPosition ：Side tabBar的位置属性。该属性与tabBarAlign这个属性配套使用。
默认值: “top”。
详细描述见tabBarAlign属性。
tabProperties ：Tab Properties 定义TabSet中所有Tab页的默认属性。
默认值: null
tabs ：Array[Tab] TabSet中所有的Tab对象。
默认值: null
TabSet常用方法如下表所示：
方法 名称/描述
addTab 添加一个tab页。
void addTab (tab[, position])
参数：
tab - 类型: Tab 一个新的tab页。
position (可选) - 类型: Number 添加的位置。
addTabs 添加一个或多个tab页。
void addTabs (tabs, position)
参数：
tabs - 类型: Tab或者 Array[Tab] 一个或多个tab页。
position - 类型: Number 添加的位置。
closeClick 关闭Tab页时的响应。
void closeClick (tab)
参数：
tab - 类型: Tab 被关闭的tab页。
disableTab 设置某个tab页不可用。
void disableTab (tab)
参数：
tab - 类型: Tab | Number | ID 设置的tab页信息。
editTabTitle 编辑某个tab页的标题。
void editTabTitle (tab)
参数：
tab - 类型: Tab | String | Integer tab信息。
enableTab 设置某个tab页可用。
void enableTab (tab)
参数：
tab - 类型: Tab | Number | ID设置的tab页信息。
getSelectedTab 获取当前选中的Tab页对象。
Tab getSelectedTab ()
返回值：
type: Tab – 当前选中的tab页对象。
getSelectedTabNumber 获取当前选中的Tab页对象所在的序号。
Number getSelectedTabNumber ()
返回值：
类型: Number – 当前选中的Tab页的序号。
getTab 获取指定的Tab页对象。
Tab getTab (tab)
注意：返回的tab对象是已经绘出来了的tab，如果当前tab还没有draw，则返回null。
参数：
tab - 类型: int | ID | Canvas tab页信息。
返回值：
类型: Tab – tab页对象。
getTabNumber 获取指定的Tab页的序号。
Number getTabNumber (tab)
参数：
tab - 类型: Number | ID | Tab tab页信息。
返回值：
类型: Number – tab页的序号，没找到则返回-1。
getTabPane 获取指定tab页的Pane对象。
Canvas getTabPane (tab)
参数：
tab - 类型: Object | Number | ID | Tab tab页信息。
返回值：
类型: Canvas – tab页的Pane对象。
removeTabs 从tabSet中移除一批Tab对象。
void removeTab (tabs)
参数：
tabs - 类型: Tab | ID | Number | Array[Tab]需要移除的tab页对象。
saveTabTitle 保存tab的标题。
void saveTabTitle ()
selectTab 选中指定的Tab。
void selectTab (tab)
参数：
tab - 类型: Number | ID | Tab tab页对象。
setPaneContainerOverflow 更新TabSet.paneContainerOverflow属性。
void setPaneContainerOverflow (newOverflow)
参数：
newOverflow - 类型: Overflow 新的布局策略。
setTabIcon 更改tab的图标。
void setTabIcon (tab, icon)
参数：
tab - 类型: Tab | Number | ID 需要更改的tab对象。
icon - 类型: SCImgURL 新的图标。
setTabPane 设置某个tab的Pane对象。
void setTabPane (tab, pane)
参数：
tab - 类型: Number | String | Tab 需要更新的tab。
pane - 类型: Canvas 新的Pane对象。
setTabProperties 设置某个tab的属性。
void setTabProperties (tab, properties)
参数：
tab - 类型: Tab | Number | ID 需要更改的Tab对象。
properties - 类型: Object tab的属性。
setTabTitle 设置某个tab的标题。
void setTabTitle (tab, title)
参数：
tab - 类型: Tab | Number | ID tab对象。
title - 类型: HTML 新的标题。
tabDeselected 去选中tab时的回调函数。
Boolean tabDeselected (tabNum, tabPane, ID, tab, newTab)
参数：
tabNum - 类型: Number 去选中tab的序号。
tabPane - 类型: Canvas 去选中tab的pane对象。
ID - 类型: id 去选中tab的ID。
tab - 类型: Tab 去选中的Tab对象。
newTab - 类型: Tab 刚被选中的Tab对象。
返回值：
type: Boolean – 返回false则取消当前tab的去选中。
tabIconClick TabBar上的图标点击事件的回调函数。
void tabIconClick (tab)
参数：
tab - 类型: Tab 触发的tab对象。
tabSelected Tab被选中的回调函数。
void tabSelected (tabNum, tabPane, ID, tab)
参数：
tabNum - 类型: Number 被选中的tab对象的序号。
tabPane - 类型: Canvas 被选中的tab对象的pane。
ID - 类型: id 被选中的tab对象ID。
tab - 类型: Tab 被选中的tab对象。
titleChanged Tab标题改变的回调函数。
Boolean titleChanged (newTitle, oldTitle, tab)
参数：
newTitle - 类型: String 改变后的标题。
oldTitle - 类型: String 改变前的标题。
tab - 类型: Tab tab对象。
返回值：
type: Boolean – 返回false继续更改标题。
create方法
详述
方法名 create
概述 创建TabSet组件，一般组件都是通过这个方法创建实体对象。
返回 TabSet组件的实体对象。
使用示例
this.tabSet = isc.TabSet.create({
ID : “tabSet_workframe”,
width : “100%”,
height : “100%”,
tabs : [tab1，tab2],
tabSelected : function(tabNum, tabPane, ID, tab){
var record = a1_sideNavTree.data.findById(tabPane.node.nodeId);
if(!a1_sideNavTree.isSelected(record)){
a1_sideNavTree.deselectRecord (a1_sideNavTree.getSelectedRecord());
a1_sideNavTree.selectRecord(record);
}}});
addTab方法
详述
方法名 addTab
概述 添加一个新的Tab组件实例到TabSet组件中。
返回 无返回值。
使用示例
this.tabSet.addTab({
ID : tableItemID,
title : tableItemTitle,
canClose : true,
pane : tableItemPanel
});
十六、Window：窗口布局组件
效果图
组件属性、方法清单
Window 继承至Canvas组件。所以自动拥有canvas的所有方法和属性。
Window常用的属性清单如下图所示：
属性：类型 名称/描述
autoCenter ：Boolean True：当前窗口自动显示在当前页面的中间。
autoSize ：Boolean 假如为 true,则窗口自动缩放大小适应窗体组件布局。
canDragReposition ：Boolean 假如为true，则用户不能在窗口的header上拖动整个窗口组件。假如showHeader为false，则整个窗体不能被拖动。
默认值: true
canDragResize ：Boolean 是否允许拖动窗口大小。
默认值: false
contentLayout ：String 窗体的布局策略。
默认值: “vertical”
窗体的布局策略接受以下几种方式：“vertical”,“horizontal”,“none”。
footer ：AutoChild 窗口的footer区域。
提供"space", “resizer”, "status"等组件。
默认值：null
footerHeight ：Number 窗口的footer区域高度。单位是像素。
默认值: 18
modalMaskOpacity ：Number 窗口在模态显示时的透明度。
默认值: 50
isModal ：Boolean 窗口是否默认显示。
默认值：false
showCloseButton ：Boolean 是否显示窗口的“关闭“按钮。
默认值: true
showFooter ：Boolean 是否显示窗口的footer区域。
默认值: true
showHeader ：Boolean 是否显示窗口的header。
默认值: true
showHeaderIcon：Boolean 是否显示窗口header上的图标。
默认值: true
showMaximizeButton：Boolean 是否显示窗口的最大化按钮。
默认值: false
showMinimizeButton：Boolean 是否显示窗口的最小化按钮。
默认值: true
showStatusBar ：Boolean 是否显示窗口的状态栏。
默认值: true
showTitle ：Boolean 是否显示窗口的标题。
默认值: true
title ：String 窗口的标题。
默认值: “Untitled Window”
Window常用的方法如下表所示：
方法 名称/描述
addItem 添加一个组件到窗体区域。
Array addItem (item)
参数：
item - 类型： Canvas 需要添加的组件。
返回值：
类型： Array – 被添加的组件列表。
addItems 添加多个组件到窗体区域。
Array addItems (items)
参数：
items - 类型： Array[Canvas] 需要添加的组件列表。
返回值：
类型：Array -被添加的组件列表。
centerInPage 设置indow.autoCenter 为 true时，show()方法会自动回到该方法。即，当窗口居中显示时会回调该函数。
void centerInPage ()
closeClick 窗口的关闭按钮的响应。默认实现隐藏窗口并返回false用以取消冒泡事件的传递。
void closeClick ()
maximize 窗口最大化按钮的响应。
void maximize ()
minimize 窗口最小化按钮的响应。
void minimize ()
removeItem 从窗体区域中删除一个组件。
Array removeItem (item)
参数：
item - 类型：Canvas 被删除的组件。
返回值：
类型：Array –被删除的组件列表。
getTitleOrientation 从窗体区域中删除一批组件。
Array removeItems (items)
参数：
items-类型:Array[canvases ]被删除的一批组件。
返回值：
类型： Array-被删除的一批组件。
setAutoSize 设置窗口的Window.autoSize这个属性，即：设置窗口是否自动适应大小。
void setAutoSize (autoSize)
参数：
autoSize - 类型: Boolean 是否自动适应窗口大小。
setStatus 设置状态栏上显示的文本。
void setStatus (statusString)
参数：
statusString - 类型: String 状态栏上需要显示的文本。
setTitle 设置窗口的标题。
void setTitle (newTitle)
参数：
newTitle - 类型: String 窗口的标题。
addItem 方法
详述
方法名 addItem
概述 添加一个组件到窗体区域
返回 被添加的组件列表
参数 参数 说明
item 类型: Canvas 需要添加的组件
使用示例
Var windowObj= isc.Window.create({
ID: “theWindow”,
title: “Window with footer”,
width: 200, height: 200,
canDragResize:true,
showFooter: true
});
Var label = isc.Label.create({
contents: “Click me”,
align: “center”,
padding: 5,
height: “100%”,
click : function () { windowObj.setStatus("Click at: “+isc.Event.getX()+”, "+isc.Event.getY()); } });
windowObj.addItem(label);
十七、Timer：定时器组件
定时器组件，用于设定定时执行任务。
组件属性、方法清单
方法 名称/描述
setTimeout 设置定时任务
timerEvent setTimeout (action:String, delay:Number)
clear 清除定时任务
void clear (timerEvent:Number)
setTimeout方法
详述
方法名 setTimeout
概述 设置定时任务。
返回 timerEvent: Object定时任务事件。。
参数 参数 说明
action : String 定时任务函数或表达式。
delay : Number 延迟多长时间启动定时任务。
使用示例
isc.Timer.setTimeout(this.ID + “.recoverState()”, 70);
clear方法
详述
方法名 clear
概述 设置定时任务。
返回 无。
参数 参数 说明
timerEvent: Object 定时任务事件。
使用示例
var timerEvent=Timer.setTimeout(".recoverState()", 70);
Timer.clear(timerEvent);
十八、JSON：json处理工具
组件属性、方法清单
方法 名称/描述
encode 把对象序列化成json字符串。
String encode (object:Object)
decode 将json字符串反序列化为对象
Object decode (jsonString:String)
使用示例
varstr=isc.JSON.encode(button1);
varobj2=isc.JSON.decode("{id1:‘zongying’,name:‘lllll’}");
varstr2=isc.JSON.encode(obj2);
varobj2=isc.JSON.decode(str2)
isc.Log.echo(obj2)
十九、XMLTools
Smartclient提供解析操作xml文档的工具类。该工具类提供可以跨浏览器的api。
相关联的两个类是：XMLDocument和XMLElement
组件属性、方法清单
方法 名称/描述
parseXML XMLDocument parseXML (xmlText:String)
根据xml字符串文本解析生成dom文档对象
selectNodes Array selectNodes (element, expression[, namespaces])
以一个xml文档节点为根，使用xpath查找符合条件的xml子节点
serializeToString String serializeToString (inputDocument)
将dom文档对象序列化成xml字符串文本
toJS Object toJS (element)
将xml文档节点对象转为javascript对象。
selectNodes方法
详述
方法名 selectNodes
概述 以一个文档节点为根，使用xpath查找符合条件的子节点
返回 Array：符合条件的xml子节点集合
参数 参数 说明
element:XMLElement 或 XMLDocument 指定选择的文档父节点。
参数类型XMLDocument，XMLElement都是对浏览器实现的原生xml文档对象的引用。他们可以作为XMLTools的 参数或者返回值。
expression:String 指定xpath表达式作为查找条件。
Namespaces:(可选) 元素的xml命名空间
使用示例
//xml文本
varxmlstr=
‘’+
‘’+
‘’+
‘’
//解析xml字符串
doc=isc.XMLTools.parseXML(xmlstr);
//使用xpath选择xml节点"person"，返回一个符合条件的列表
list=isc.XMLTools.selectNodes(doc,"/root/person");
for(vari=0;i<list.length;i++){
//取得xml节点"name"属性
document.write(list[i].getAttribute(“name”)+",");
}
//选择符合条件的person ，过滤条件：@name=“zongying” and @age>30
list2=isc.XMLTools.selectNodes(doc,’/root/person[@name=“zongying” and @age>30]’);
log(list2[0].getAttribute(“name”));
//将xml文档对象序列化为xml字符串
alert(isc.XMLTools.serializeToString(doc));
//将xml字符串转为json字符串
varjsonObj=isc.XMLTools.toJS(list[0]);
log(jsonObj.name+","+jsonObj.age);
toJS方法
详述
方法名 toJS
概述 将xml文档节点对象转为javascript对象。例如
y
将被转换为：
{ bar:“zoo”, x:“y”}
返回 Object：JavaScript对象
参数 参数 说明
element:XMLElement 或 XMLDocument 指定选择的文档父节点。
参数类型XMLDocument，XMLElement都是对浏览器实现的原生xml文档对象的引用。他们可以作为XMLTools的 参数或者返回值。
二十、Smarclient数据绑定与DataSource
Smarclient框架支持数据绑定机制。
数据绑定主要分为3个层次：
数据展现层：数据绑定UI组件（Databound Components）及其子类。
数据提供层：数据源组件（DataSouce）及其子类。
数据集成层：服务端业务数据提供组件。
数据绑定UI组件相当于mvc模式中的视图（view），DataSouce相当于模型（modle）。这两种组件协同工作，既可完成所谓的“数据绑定”。
数据绑定UI组件：包括ListGrid、TreeGrid、FormItem等等，主要负责在UI界面上接收用户的增、删、改、查（CRUD）操作，并且在UI界面上展现数据。
数据源组件：即DataSouce，负责与服务端通过ajax进行数据交互取得数据，然后给UI组件提供数据。Datasouce为绑定在他上面的UI组件调用CRUD数据操作，对这些组件来说是透明的，DataSource操作数据的实现细节，可视化组件并不知道，带来的一个效果是，Datasouce是可插拔的，他们可以在不改变用户界面的情况下被替换。
当一个数据绑定UI组件绑定到在一个DataSource对象上，调用UI组件的CRUD操作，就会自动调用DataSource的CRUD操作。DataSource为此创建一个DSRequest (DataSource Request)对象来表示这个操作，并且通过ajax通信模块向服务端发送这个请求。
业务数据提供组件：服务端接收到客户端的ajax请求后，调用业务数据提供组件处理数据，就是根据DSRequest来创建相应的DSResponse (DataSource Response)对象，将处理的结过返回客户端的DataSouce。业务数据提供组件由是由应用进行二次开发产生。组件的形式没有特殊约定，但是其数据入口参数可返回参数格式必须符合smartclient的数据格式约定。具体数据格式请参考下一篇：《Smarclient框架Datasource与服务端交互数据格式》。
客户端的DataSouce将从服务端收到数据，将数据缓存到客户端模型中，然后通知UI组件更新界面展现。
Smarclient数据源组件与服务端通信格式可以有多种：
XML
JSON
SOAP等。
使用实例：
DataSource.create({
ID:“userInfo”,//数据源名称
dataFormat:“xml/json”,//数据格式
dataURL:"<%=path%>/country.xml",//可以是xml或者json文件路径，也可以是向后台请求路径
recordXPath:"//country",//如果请求返回结果为xml表示读取信息的根节点为country
fields:[//表示最终显示的数据项
{name:“countryCode”,title:“国家编号”},
{name:“countryName”,title:“国家名称”}
],
operationBindings:[//如果是向后台发送请求，下面是类型
{operationType:“fetch”, //查询请求（add：新增：remove：删除；update：修改）
dataURL:"<%=path%>/findInfo",//请求url
requestProperties: {
params:{countryCode:”1”,countryName:”2”},//参数
httpMethod: “post”//请求方式
}
}
]
});
Smarclient框架Datasource与服务端交互数据格式
Datasource与服务端交互数据格式
Datasource和后端交互一律采用json格式。
请求格式：
Fetch 自动分页：
Request URL:(get)
http://localhost:8080/epms/AServlet?_operationType=fetch&_startRow=0&_endRow=6&_textMatchStyle=exact&_componentId=countGrid&dataSource=countryDS&isc_metaDataPrefix=&isc_dataFormat=json
Request Method:get
Get参数
_operationType:fetch
_startRow:0
_endRow:6
_textMatchStyle:exact
_componentId:countGrid
dataSource:countryDS
isc_metaDataPrefix:
isc_dataFormat:json
Request URL:(post)
http://localhost:41088/servlets-examples/AsServlet?isc_dataFormat=json
Request Method:post
Get参数
isc_dataFormat:json
post参数
{ “dataSource”:“countryDS”, “operationType”:“fetch”, “startRow”:0, “endRow”:5, “textMatchStyle”:“exact”, “componentId”:“countGrid”, “data”:{ “com_zte_dap_commandcode”:“10110” }, “oldValues”:null }
手工分页：
http://localhost:41088/servlets-examples/AsServlet?pageSize=5&pageNo=1&_operationType=fetch&_startRow=0&_endRow=75&_textMatchStyle=exact&_componentId=countGrid&dataSource=countryDSManual&isc_metaDataPrefix=&isc_dataFormat=xml
Request Method:get
Get参数
_operationType:fetch
_startRow:0
_endRow:6
_textMatchStyle:exact
_componentId:countGrid
dataSource:countryDS
isc_metaDataPrefix:
isc_dataFormat:json
pageNo：1
pageSize：5
Add
Request URL: (post)
http://localhost:41088/servlets-examples/AosServlet?isc_dataFormat=json
Request Method:POST
Get参数：
isc_dataFormat:json
post参数
{ “dataSource”:“countryDS”, “operationType”:“add”, “data”:{ “id”:“99”, “name”:“zy” }, “oldValues”:null }
Update
Request URL(post):
http://localhost:41088/servlets-examples/AosServlet?isc_dataFormat=json
Request Method:POST
Get参数：
isc_dataFormat:json
post参数
{ “dataSource”:“countryDS”, “operationType”:“update”, “data”:{ “id”:“99”, “zongying”:“zy2” }, “oldValues”:null }
Remove
Request URL: (post)
http://localhost:41088/servlets-examples/AosServlet?isc_dataFormat=json
Request Method:POST
Get参数：
isc_dataFormat:json
post参数
{ “dataSource”:“countryDS”, “operationType”:“remove”, “componentId”:“countGrid”, “data”:{ “id”:“UK”, “zongying”:“zy2” }, “oldValues”:null }
响应格式：
正确响应：
Fetch
自动分页：
response: {status: ‘0’,startRow: ‘0’,dRow: ‘5’,totalRows: ‘10’,
data: [{id: ‘0’,name: ‘name0’}, {id: ‘1’,name: ‘name1’}, {id: ‘2’,name: ‘name2’}, {id: ‘3’,name: ‘name3’}, {id: ‘4’,name: ‘name4’}, {id: ‘5’,name: ‘name5’
}]}};
手工分页：
response: {status: ‘0’,startRow: ‘0’,endRow: ‘5’,totalRows: ‘5’,totalPages:‘5’,realTotalRows:‘23’,
data: [{id: ‘0’,name: ‘name0’}, {id: ‘1’,name: ‘name1’}, {id: ‘2’,name: ‘name2’}, {id: ‘3’,name: ‘name3’}, {id: ‘4’,name: ‘name4’}, {id: ‘5’,name: ‘name5’
}]}};
Add,update,remove
response: {status: ‘0’,data: [{id: ‘0’,name: ‘name0’}]]}};
返回一般错误
response: {status: ‘-1’,data: “error mesdsage”}
返回数据验证错误
{“response”: {“endRow”: 0,“totalRows”: 0,“status”: -4,“startRow”: 0,“data”: {“errorMessage”: “A error on field1”}}}
或者
{response: {status: -4,errors: {field1: {errorMessage: “A validation error on field1”},field2: {errorMessage: “A validation error on field2”}}}}
使用示例
//定义数据源
varcountryDS = isc.RestDataSource.create({
ID:“countryDS”,
dataFormat:“json”,
//recordXPath: “//country”,
fetchDataURL:"/servlets-examples/AsServlet",
addDataURL:"/servlets-examples/AsServlet",
updateDataURL:"/servlets-examples/AsServlet",
removeDataURL:"/servlets-examples/AsServlet",
selectionAppearance:“checkbox”,
operationBindings: [{
operationType:“fetch”,
dataProtocol:“getParams”
//dataProtocol: “postMessage”
}, {
operationType:“add”,
dataProtocol:“postMessage”
}, {
operationType:“update”,
dataProtocol:“postMessage”
}, {
operationType:“remove”,
dataProtocol:“getParams”
}],
fields: {
id: {
name:“id”,
title:“Code”,
primaryKey:true,
required:true
},
name: {
name:“name”,
title:“Country”,
canEdit:true
}
},
handleError:function(response, request){
//如果服务端返回错误
if (response.status < 0) {
var errMsg = null;
//-90系统级别错误：找不到服务器（httpResponseCode/ xmlHttpRequest.status ：0），或者找不到资源（404）
//-1服务端servlet处理后，返回系统级别错误，不可恢复错误（200）。
//-4服务端servlet处理后，回数据校验错误（200）
switch (response.status) {
case-90:
errMsg = response.data.data;
break;
case-1:
errMsg = response.data
break;
case-4:
default:
}
//Canvas.getById(request.componentId ).data=null;
isc.warn(‘自定义错误处理信息:\n’ + errMsg);
countGrid.data =null;
returnfalse;//是否屏蔽默认错误处理
}
//response.status>=0处理
}
})
//定义数据绑定控件，并且绑定到数据源
var countGrid = isc.ListGrid.create({
ID:“countGrid”,
width: 500,
height: 100,
alternateRecordStyles:true,
dataSource: countryDS,//绑定到数据源
autoFetchData:false,
autoSaveEdits:false,
});
//查询数据
var actButton = isc.Button.create({
left: 200,
top: 120,
width: 150,
title:“fetch data”,
click:function(){
countGrid.invalidateCache();
countGrid.fetchData({
com_zte_dap_commandcode:‘10110’
});
}
});
2329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
