smartclient框架组件介绍7(Canvas,TabSet,Window)

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);