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  ：TabProperties

定义TabSet中所有Tab页的默认属性。

默认值: null

tabs  ：Array[Tab]

TabSet中所有的Tab对象。

默认值: null

TabSet常用方法如下表所示：

方法

名称/描述

addTab

添加一个tab页。

voidaddTab (tab[, position])

参数：

tab -类型: Tab一个新的tab页。

position (可选) -类型: Number添加的位置。

addTabs 

添加一个或多个tab页。

voidaddTabs (tabs, position)

参数：

tabs -类型: Tab或者Array[Tab] 一个或多个tab页。

position -类型: Number添加的位置。

closeClick

关闭Tab页时的响应。

voidcloseClick (tab)

参数：

tab -类型: Tab被关闭的tab页。

disableTab

设置某个tab页不可用。

voiddisableTab (tab)

参数：

tab -类型: Tab | Number | ID设置的tab页信息。

editTabTitle

编辑某个tab页的标题。

voideditTabTitle (tab)

参数：

tab -类型: Tab | String | Integer tab信息。

enableTab

设置某个tab页可用。

voidenableTab (tab)

参数：

tab -类型: Tab | Number | ID设置的tab页信息。

getSelectedTab

获取当前选中的Tab页对象。

TabgetSelectedTab ()

返回值：

type: Tab –当前选中的tab页对象。

getSelectedTabNumber

获取当前选中的Tab页对象所在的序号。

NumbergetSelectedTabNumber ()

返回值：

类型: Number –当前选中的Tab页的序号。

getTab 

获取指定的Tab页对象。

TabgetTab (tab)

注意：返回的tab对象是已经绘出来了的tab，如果当前tab还没有draw，则返回null。

参数：

tab -类型: int | ID | Canvas tab页信息。

返回值：

类型: Tab – tab页对象。

getTabNumber

获取指定的Tab页的序号。

NumbergetTabNumber (tab)

参数：

tab -类型: Number | ID | Tab tab页信息。

返回值：

类型: Number – tab页的序号，没找到则返回-1。

getTabPane 

获取指定tab页的Pane对象。

CanvasgetTabPane (tab)

参数：

tab -类型: Object | Number | ID | Tab tab页信息。

返回值：

类型: Canvas – tab页的Pane对象。

removeTabs 

从tabSet中移除一批Tab对象。

voidremoveTab (tabs)

参数：

tabs -类型: Tab | ID | Number | Array[Tab]需要移除的tab页对象。

saveTabTitle

保存tab的标题。

void saveTabTitle ()

selectTab

选中指定的Tab。

voidselectTab (tab)

参数：

tab -类型: Number | ID | Tab tab页对象。

setPaneContainerOverflow 

更新TabSet.paneContainerOverflow属性。

voidsetPaneContainerOverflow (newOverflow)

参数：

newOverflow -类型: Overflow新的布局策略。

setTabIcon 

更改tab的图标。

voidsetTabIcon (tab, icon)

参数：

tab -类型: Tab | Number | ID需要更改的tab对象。

icon -类型: SCImgURL新的图标。

setTabPane 

设置某个tab的Pane对象。

voidsetTabPane (tab, pane)

参数：

tab -类型: Number | String | Tab需要更新的tab。

pane -类型: Canvas新的Pane对象。

setTabProperties 

设置某个tab的属性。

voidsetTabProperties (tab, properties)

参数：

tab -类型: Tab | Number | ID需要更改的Tab对象。

properties -类型: Object tab的属性。

setTabTitle 

设置某个tab的标题。

voidsetTabTitle (tab, title)

参数：

tab -类型: Tab | Number | ID tab对象。

title -类型: HTML新的标题。

tabDeselected 

去选中tab时的回调函数。

BooleantabDeselected (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上的图标点击事件的回调函数。

voidtabIconClick (tab)

参数：

tab -类型: Tab触发的tab对象。

tabSelected 

Tab被选中的回调函数。

voidtabSelected (tabNum, tabPane, ID, tab)

参数：

tabNum -类型: Number被选中的tab对象的序号。

tabPane -类型: Canvas被选中的tab对象的pane。

ID -类型: id被选中的tab对象ID。

tab -类型: Tab被选中的tab对象。

titleChanged 

Tab标题改变的回调函数。

BooleantitleChanged (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 

添加一个组件到窗体区域。

ArrayaddItem (item)

参数：

item -类型： Canvas需要添加的组件。

返回值：

类型： Array –被添加的组件列表。

addItems

添加多个组件到窗体区域。

ArrayaddItems (items)

参数：

items -类型： Array[Canvas]需要添加的组件列表。

返回值：

类型：Array -被添加的组件列表。

centerInPage

设置indow.autoCenter为 true时，show()方法会自动回到该方法。即，当窗口居中显示时会回调该函数。

void centerInPage ()

closeClick

窗口的关闭按钮的响应。默认实现隐藏窗口并返回false用以取消冒泡事件的传递。

void closeClick ()

maximize

窗口最大化按钮的响应。

void maximize ()

minimize

窗口最小化按钮的响应。

void minimize ()

removeItem

从窗体区域中删除一个组件。

ArrayremoveItem (item)

参数：

item -类型：Canvas被删除的组件。

返回值：

类型：Array –被删除的组件列表。

getTitleOrientation

从窗体区域中删除一批组件。

ArrayremoveItems (items)

参数：

items-类型:Array[canvases ]被删除的一批组件。

返回值：

类型： Array-被删除的一批组件。

setAutoSize

设置窗口的Window.autoSize这个属性，即：设置窗口是否自动适应大小。

voidsetAutoSize (autoSize)

参数：

autoSize -类型: Boolean是否自动适应窗口大小。

setStatus

设置状态栏上显示的文本。

voidsetStatus (statusString)

参数：

statusString -类型: String状态栏上需要显示的文本。

setTitle

设置窗口的标题。

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