NCV5-轻量级组件技术红皮书

1、no ri ch cl i ent轻量级组件技术红皮书nc-uap 5.0用友n2-lap2017-01-18第一章冃u § 11. 文档介绍12. 概述13. 组件整体继承关系介绍1第二章各组件详细设计与使用方法介绍31 basecomponent32. modaldialogcomp2. confirmdialogcomp83. messagedialogcomp114. warningdialogcomp135. errordialogcomp156. progressdialogcomp167. panelcomp188tabcomp239. buttoncomp2610.

2、combocomp2811. listtolistcomp3112. stringtextcomp3313. integertextcomp3514. datetextcomp3615. floattextcomp3816. treeviewcomp3917. outlookbarcomp4318. sliderbarcomp4419. gridcomp46第一章前言1. 文档介绍/文档目的该文档主要而向nc rich client的开发和使用人员，通过系统介绍每个组件的构成， 外观定制(css),使开发人员具体了解每个组件的结构，使使用人员了解每个组件的使用方 法，能够轻松自如的使用每个组件

3、。/文档范围nc rich client的维护，作用于组件的开发阶段和维护阶段。/读者对象nc rich client轻量级组件的开发人员、维护人员、项h负责人、项冃核查人员及使 用人员。/术语与缩写解释缩写、术语解释组件、控件在本文档中均指nc rich client中的轻量级控件2.概述在为传统的web应用编写html页面的时候，页面编写者只有非常有限的一套预定义 gui组件，即html表单元素。他们的特征集在近10年的时间里儿乎没有什么变化，与现 代的gui工具集相比，它们是非常基础的。如果页面作者希望引入树控件或者可编辑的栅 格、日历控件或者分级菜单z类的，就需要借助于基础文档元素的底

4、层编程。由于开发porud 的需要，为了 por更具实用性和易用性，同吋随着ajax技术的逐渐流行，客八端的重视 程度h益提高，为了很好的利用ajax技术提高web界面的响应速度，并带给用户更好的浏 览体验，开发一套适用于portal并具有一定灵活性和可扩展性的基础控件库也成了势在必行 的工作。3. 组件整体继承关系介绍由于javascript代码均是下载到客户端解释执行，所以为了减轻客户端压力，类的 继承层次不能太深，否则在客八端运行时代码的执行速度就会变慢，牛成的原始js代 码就会增多,考虑这个效率原因,nc rich client的大部分组件均釆用一级继承,即 肓接继承门基类baseco

5、mponent o4. nc rich client 组件特色1. 通过prototype属性建立面向对象的轻最级控件库2. 接口标准化,比如所有事件触发以onxx开放3. 支持动态更改皮肤外观。尽量以css将展现分离，支持单个控件的各个细节的口定 义外观修改4. 将控件本身与数据绑定分离。树控件，grid控件均采用mvc设计模式实现5. 使控件适应于tag和ajax等多种环境6. 提供丰富的控件类别。rich client控件库提供了几i 种轻量级控件，完全满足大多 数web应用的需要7. 同时对各个控件，进行尽量轻度的封装，减轻客户端压力8. 提供完善的js调试方式。比如watchtime

6、（监测代码执行时间）和log（前台日志）注意：控件使用过程中，如果要销毁一个控件，必须调用destroyself方法，这样才能保 证控件所占用资源完全被禅放5. rich client控件的一些开发规范1. 如果子控件的显示对象不是div_gen,必须覆盖getobjhtml（）方法返回真正的显示对 象2. 如果objhtml是显示对象，那么使用objhtml.owncr nj以得到控件的数据对彖3. 如果obj是数据对象，那么使用obj.parenthtml可以得到父控件的显示对象4. 如果obj是数据対象，那么使用obj.parentowner可以得到父控件的数据対象5. 基类baseco

7、mponent采用了 template pattern设计模式为控件放入父控件的过程提供 了统一的流程，了类必须实现manageself方法,了控件在放入父控件后会调用此方 法6. 子控件兼听父控件的大小改变调整口己的大小，子控件如果需要改变口己的大小必 须提供adjustself方法第二章各组件详细设计与使用方法介绍1 basecomponent组件名称：basecomponent 组件类型：所有控件的基类1组件说明所冇控件基类，包含了所冇控件的其同属性和操作方法，此类不需要用户主动调用。 以下给出了这个类的详细函数原型描述。1.2函数介绍constructor summarybasecom

8、ponentsame, left, top, width, height)parameters:name -控件名称left -控件左部x坐标top -控件顶部y坐标width控件宽度height -控件高度voidadd(objhtml)添加子控件默认方法.如果需要特殊控制，需覆盖此方法parameters:objhtml子控件对彖的显示对彖voidaddcontextmenu(menu)添加控件的右键菜单parameters:menu要添加的contextmenucomp控件voiddestrovselfo销毁控件objectgetcompheighto得到组件的height属性objec

9、tgetcompwidtho得到组件的width属性objectsetcontentheishto得到容器内容部分的高度.objectgetcontentwidtho得到容器内容部分的宽度.objectgetob.ihtmlo获取控件的显示对象voidhide()隐藏控件(显示属性是display)voidhidevo隐藏控件(显示属性是visibility)voidmanaaeselfo添加进父控件之后，如果控件需要依据父控件设定值，则覆盖此函数voidoncontextmenu(e)默认控件右键菜单显示.如果需要额外控制，覆盖此函数voidplaceln(parent)将控件添加到父控件屮

10、,如冇特殊要求，了控件可以覆盖此方法.parameters:parent此控件将要放入的父容器组件voidsetboundsdeft, top, width, height)设置控件边界值.子控件可根据实际情况覆盖此函数parameters:left -控件左侧x坐标top控件顶部y坐标width控件的宽度height -控件的高度voidsetpositiondeft. too)设置控件位置parameters:left控件左侧x坐标top -控件顶部y处标voidsetsizefwidth, heiqht)设置控件人小parameters:width控件的宽度height -控件的高度vo

11、idsetzindex(zlndex)设置控件立体窩度parameters:zlndex控件的第三维窩度voidshow()显示控件(显示属性是display)voidshowvo显示控件(显示属性是visibility)2. modaldialogcomp组件名称：modaldialogcomp组件类型：container组件父类：basecomponent2.1组件说明模态对话框控件，提供基木的状态对话框容器，同时由此派生一些常用对话框，比如messagedialog,warningdialog 等2.2函数介绍constructor summarymodaldialorcomp(name

12、, title, left, top, width, height, classname)parameters:name -控件名称title控件标题left -控件左部x坐标top控件顶部y坐标width -控件宽度height -控件高度classname - css文件的名字voidadd(objhtml)给对话框添加一个纽件履盖base的add方法parameters:objhtml -显示对象objectgetcontentpaneo得到内容面版voidhide()隐藏模式对话框voidonaftercloseo眾露的方法，在对话框关闭z后调用此方法voidonbeforeclose

13、o暴露的方法，在对话框关闭的时候调用此方法voidonclosingo暴露的方法，对话框关闭时调用此方法voidsetboundsdeft, top, width, height)重载父类的方法parameters:left-新的左部x坐标top新的顶部y坐标width新宽度 height -新高度voidsetsizefwidth. height)设置对话框大小parameters:width -新宽度height -新髙度voidsettitle(title)parameters:title 标题文字voidshow()显示模式对话框3. confirmdialogcomp组件名称：con

14、firmdialogcomp组件类型：container 组件父类：modaldialogcomp3.1组件说明此确认对话框是对modaldialog的封装实现。在对话框底部添加了 ok, gance 1按钮, 使用者使用时只需提供ok, cancel相对应的处理函数，给出需要显示的内容信息即可。3.2组件最终效果展示(图3.2-1确认对话框)3.3组件皮肤设置说明modaldialog. css是对dialog夕卜观整体的控制,包括字体,大小，标题背景，内容区背景 等3.4组件使用说明 使用tag标签的用法<fw: conf irmdialog"确定删除此布局吗？"

15、 ok= rrconf ion" cance 1= rfnoconf irmrr></fu:confirmdialog> function confirm()alert (ppokrr);function noconfirm()alert (rrcancelrr);msg：你需耍显示的提示信息ok:点击确认后需要执行的函数名称cancel:点击取消后需要执行的函数名称 不使用tag标签的用法confirmdialog = confirmdialogcomp. showdialog (msg);/ 用需要显示的字符串代替 msg confirmdialog. onok

16、二confirm; /把点击确认按钮后需要执行的函数名赋给onok属性 confirmdialog. oncancel = noconfirm; /把点击取消需要执行的两数名赋给oncancel属 性 构造图数说明constructor summaryconfirmdialo2conip(name, title, left, top, msg, refl mg, <boolean> another)parameters:name -对话框名字title对话槿标题msg -需要显示的信息reflmg -对话框左部要显示的图片(冇默认图片)another由于确认对话框生命周期的特殊性，

17、特殊时候需耍另一个实例 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了 confirmdialog对话框实例voidchangemsg(msq)改变confirmdialogcomp的显示信息parameters:msg 要显示的确认文字objectgetcontentpaneo得到要添加内容的面板objectoncancek)暴露给川户覆盖的函数，点击取消按钮后调用此函数objectonok()眾露给用户覆盖的函数,点击确认按钮后调用此函数<static> voidhidedialogo静态方法，隐藏对话框<static> objectshowdia

18、lo2(messaqet okfunc. cancelfunc, obi1, obi2. zlndext <booleaanother)创建一个对话框的类方法parameters:message 要显示的信息okfunc-点击确定按钮时调用的函数名cancelfunc -点击取消按钮时调用的函数名obj仁 调用okfunc函数的对象obj2 -调用cancelfunc函数的対象another由于确认对话框生命周期的特殊性，特殊时候需要另一个实例4. messagedialogcomp组件名称：messagedialogcomp组件类型：container组件父类：modal dial o

19、gcomp4.1组件说明messagedialogcomp组件,通过输入指定字符串和显示图片提供此对话框。4.2组件最终效果展示（图3.3-1消息对话框）4.3组件皮肤设置说明modaldialog. css是对dialog夕卜观整体的控制,包括字体,大小，标题背景，内容区背景 等4.4组件使用说明 使用tag标签的用法<fw:messagedialog msg=f,这是另一个信息提示对话框这是另一个信息提示对话框!这是另一个信息提示对话框! </fu:messagedialog>msg：你需要显示的捉示信息 不使用tag标签的用法messagcdialog = messag

20、cdialogcomp. showdialog（msg） ;/ 用户需要显示的字符串代替msg 构造岡数说明constructor summarymessapedialozcompgame, title, left, top, msg, reflmg）parameters:name -控件的名称（也就是id）title对话框标题left -控件左部x坐标top控件顶部y坐标msg -显示的信息，用户输入refl mg信息对话框左侧的显示图片的url 用户可调用的组件函数和组件事件说明voidchanhcmsg(msq)改变messagedialog的显示信息parameters:msg -要显

21、示的提示信息文字voidonclicko暴露给川户覆盖的方法，点击确尬按钮后调用此方法<static> voidhidedialogo静态方法，隐藏对话框<static> objectshowdialog(messaqe)创建一个对话框的类方法parameters:message要显示的提示信息文字5. warningdialogcomp组件名称:warningdialogcomp组件类型：container 组件父类:modaldialogcomp5.1组件说明warningdialogcomp组件，通过显示输入字符串和警示图片提供此对话框。5.2组件最终效果展示(图

22、3.4-1警告对话框)5.3组件皮肤设置说明modaldialog. css是对dialog外观整体的控制，包括字体，大小，标题廿景，内容区背景 等5.4组件使用说明 使用tag标签的用法<fv:varningdialog msg"这是另一个警告对话框!这是另一个警告对话框!这是另一个警告对话框！ </£w:varningdialog>msg：你需耍显示的提示信息 不使用tag标签的用法warningdialog = warningdialogcomp. showdialog(msg);/ 用需要显示的字符串代替 msg 构造岡数说明constructor

23、 summarywamiii2diak)2comp(name, title, left, top, msg, reflmg)parameters:name -控件的名称(也就是id)title对话框标题left -控件左部x坐标top控件顶部y坐标msg -显示的警告信息，川户输入reflmg警告对话框左侧的显示图片的url用户可调用的组件函数和组件事件说明voidchangemsg(msq)改变wamingdialog的显示信息parameters:msg要显示的警告信息文字voidonclicko暴露给用户覆盖的方法<static> voidhidedialogo静态方法，隐藏

24、对话框<static> objectshowdialog( messaqe)创建一个对话框的类方法parameters:message -要显示的警告信息6. errordialogcomp组件名称：errordialogcomp组件类型：container 组件父类：modaldialogcomp6.1组件说明errordialogcomp组件，通过显示输入字符串和错误图片捉供此对话框。6.2组件最终效果展示（图6.2-1提示对话框）6.3组件皮肤设置说明modaldialog. css是对dialog外观整体的控制，包括字体，大小，标题廿景，内容区背景 等6.4组件使用说明 使

25、用tag标签的用法<fu:errordialog msg=r,这是另一个错误提示对话框!这是另个错误提示对话框!这是另一个错误槌示对话框! ” </fw:errordialog>msg：你需要显示的错误提示信息 不使用tag标签的用法errordialog = errordialogcomp. showdialog(msg) ;/ 用需要显示的字符串代替 msg用户可调用的组件函数和组件事件说明voidchangemsg(msq)改变eitordialog的显示信息parameters:msg要显示的信息voidonclicko暴露给用户覆盖的方法<static>

26、 voidhidedialogo隐藏对话框<static> objectshowdialog( messaqe)创建一个对话框的类方法parameters:message -耍显示的错误信息7 progressdialogcomp组件名称：progressdialogcomp 组件类型：container 组件父类：modaldialogcomp7.1组件说明progressdialogcomp纽件，通过显示正在进行的动作描述告知用户正在进彳亍的事情。7.2组件最终效果展示(图7. 2-1进度对话框)7.3组件皮肤设置说明modaldialog. css是对dialog外观整体的控

27、制，包括字体，大小，标题背景，内容区巧景 等7.4组件使用说明 使用tag标签的用法<f w: progressdialog ins"正在读取多攵扌居"> </fw:progressdialog> msg：你需要显示的提示信息 不使用tag标签的用法progressdialog = progressdialogcomp. showdialog(msg) ;/用需要显示的字符串代替 msg 构造函数说明constructor summaryprogrcssdialoecomzname, title, left, top, msg, reflmg）par

28、ameters:name控件的名称（也就是id）title -对话框标题left控件左部x坐标top -控件顶部y坐标msg显示的进度提示信息，用户输入reflmg进度提示对话框左侧的显示图片的url 用户可调用的组件函数和组件事件说明voidchangemsg(msq)改变eitordialog的显示信息<static> voidhidedialogq静态方法，隐藏对话框<static> objectshowdialog(message)创建一个对话框的类方法8. debugmonitor组件名称：debugmonitor 组件类型：container 组件父类:8.

29、1组件说明前台调试监测器，为前台的js代码调试和性能监测提供了很人的便利1. 监测javascript代码执行时间2. 在debug模式下察看log3. 动态执行给定js代码8.2组件最终效果展示（图8.2-1进度对话框）8.3组件皮肤设置说明此控件的外观由tab.css和modaldialog. css共同决定8.4组件使用说明用法pageutil 4'提供了简便的操作方法，只要使用lfw框架的产品均可以按如下方法 使用,记前台log只需调用log(msg)方法,getwatch(funcname)方法得到时间表对象,调用 此对彖的stail()方法ht以启动时间表，调用stop()

30、方法停止此时间表,，此时间表监测函数的 执行时间将在调试对话框显示出来时展现。也可以直接使用该组件提供的内部方法实现pageutil封装的简便方法constructor summarydebupmonitoromethod summaryvoidcreatejscodecontento创建js代码执行面板objectgetlouo得到log监测器objectgetlogcontento得到观察log的内容面板objectgettiniecontento得到观察执行时间的内容面板objectgetwatch(funcname)得到时间表对彖parameters:funcname监测执行时间的函数

31、名称(用户自己指定)，供monitor报告时间时显示用voidhidemonitoro隐藏调试对话框voidshowmonitoro显示调试对话框，察看信息constructor summarylogmonitorq记录log信息method summaryvoidclear()清除log记录数组voidlog(<string> msg)记录log信息voidreporto报告所有log信息constructor summarytimemonitor()测试javascript代码执行时间监测器method summaryvoidclearvvatcheso清除所有的watches

32、objectgetwatch(funcname)得到指定id的watch对象objectgetwatches()返回所有的watch对彖voidreporto报告时间消耗constructor summaryjscodeexecutoh)js代码执行器method summaryvoidrun(code)constructor summarywatch ()时间表对象method summaryvoidstart()启动计时器voidsto)()停止计时器9. panelcomp组件名称：panelcomp 组件类型：container 组件父类：basecomponent9组件说明panel

33、容器，提供基木的包装，任何控件都可以放入其中，可继承它实现滚动panel等。9.2组件最终效果展示山于panel血板本身没有任何色彩，所以不提供展示效果。9.3组件皮肤设置说明panel, css是对panel comp外观效果的控制，默认不提供任何效果，根据具体需要可以 提供对panel边框、背景等效果的设进。9.4组件使用说明 使用tag标签的用法：<fw:panel name=rr,r left=,fow top=fp0,f width=rr100vf height=fm, scrollable=frtruer, parentfrro=rnr> </fv:panel&g

34、t;name:控件名称left:当控件设置绝对定位吋，相对父控件的左侧x坐标值(单位：像素px)top:当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px)width:宽度，可以采用百分比和像索两种 height:高度，可以采用百分比和像素两种scrollable:设置面板可否滚动parentfrm:此控件的父控件名称。注：对于使用tag标签的方式，如果父控件不是nc rich client组件库中的控件需要设定此值，否则tag中封装了自动寻找父控件的 代码，使用者不需耍白己指定。 不使用tag标签的用法：var panel = new panelcomp(parent, name

35、, left, top, width, height, position, scrol1, classname);position:不指定默认采用绝对定位parent:此控件的父控件，此控件依赖能定位自身的父控件定位自身位置用户可调用的组件函数和组件事件说明注：以下的函数均假定已经牛成了 panel面版实例/* 设置而版的可滚动性* param scrol 1是否可滚动*/panel. setscroll (scroll) ; /使用方法10. tabcomp组件名称:tabcomp组件类型：container组件父类：basecomponent10组件说明tab页签控件，在点到不同的页时，该

36、页的标签显示为活动状态，同时显示此贞内容区 的内容。10.2组件最终效果展示nchr应用日常办公坛服务各地知识专芒 企业文化 首页nchr应用 鮭测试信息中心 ncii团应用日初公企业论坛18务各地知识$社企业文化（图3.8-1不同css文件控制下的皮肤外观）10.3组件皮肤设置说明tab. css对tabcomp外观效果进行控制，使用者可以根据ti己的喜好改写相关的css文 件或者重新编写新的css文件來改变此控件外观，如激活项的样式，字体样式，背静颜色等。10.4组件使用说明 使用tag标签的用法：<fu:tab name=,tabrr left=r,0rr top=rf0,p wi

37、dth= r,100rr height" 10”" tatoitemwidth=80ff><fw:tabitem name=rfiteinlrf title=rritenilrr></fw:tabitem><fw: tab item name=fritem2ff title=rritem2 rr></fw:tabitem> </fw:tab>name： 控件名称left:当控件设置绝对定位时，相对父控件的左侧x坐标值（单位：像素px）top:当控件设置绝对定位时，相对符控件的顶部y坐标值（单位：像素px）wi

38、dth:宽度，可以采用百分比和像素两种 height:高度，可以采用百分比和像素两种tabttemwidth:每一个页签项的宽度值（单位:像素px） 不使用tag标签的用法：var tab = nowtabcomp（parent, name, left, top, width, height, tabltemwidth, position:'iteml=tabl. create! tern （name, title）;/通过调用 create! tem （name, title）创建子项用户可调用的组件函数和组件事件说明注：以卜-的函数均假定己经牛成了 tdb页签实例/* 由item项

39、的名字得到item项的索引* param name item 项的名字*/tab. getltemlndexbyname (name) ;/使用方法/* 得到item的索引值(索引值从0开始)* param name item项的数据对彖*/tab getltemlndex(item);/* 得到当前的激活项* return当前激活项的数据对象*/tab getselectedltem();/* 得到当前激活项的索引值* return当前激活项的数据对象*/tab. getselectedlndex();/* 暴露给用户进行覆盖的方法，此函数是点击事件传输的最上层，主要用于做一些统一处 理的操

40、作* 注：e. triggerttem中绑定了当前触发的是哪个item t项*/tab. onclick = function(e)/todo:用户自己的处理/* 当激活itom位置变化吋会掉用这个函数，用八可以重载此函数处理自己事情* param triggcrltem传入是谁激活的此item* param currltem 当前激活的 item* param target item 将要被激活的 item*/tab. beforeactivedtabitemchange = function(triggeritem, currltem, targetitem)/todo:用户自己的处理注：

41、以下的函数均假定已经生成了某一个tabitem 了项实例/* 显刀£指定的tabttem标题名字* return item 项标题*/tab item. showtitleo ;/* 改变itemdiv的宽度* ©param delta需要改变的宽度值*/tabitem. changewidth(delta);/* 设置itemdiv的宽度* ©param width新的的宽度值*/tabitem. setwidth(width);11. buttoncomp组件名称:buttoncomp组件类型:contro 1 s组件父类:basecomponent11.1组

42、件说明按钮控件，用八可以指定图片显示于按钮之上，可以指定文字和图片的相对位置。 不传入图片路径则只显示文字。11.2组件最终效果展示(注:button 1 激活)buttonl（注:buttonl 禁用）（图3.9-1按钮控件）11.3组件皮肤设置说明button, css对buttoncomp外观效果进行控制，使用者可以根据ti己的喜好修改相关的 css文件或者重新编写新的css文件来改变此控件外观，如按钮普通状态，激活状态，禁川 状态的外观。11.4组件使用说明 使用tag标签的用法：<fw:button name= ,rbuttonl,r left=,r30,r top=,r250

43、,r click= ,rhi,r height=,r70,r disabled= rrfalserr text=rrbuttonlrr tip=nthis is a test buttonrr></fw:button>function hi()alert (rryou click the buttonrr);(注：不使用图片时的按钮tag用法)<fw:button narae=,button2ff left=rr150,r top=rr250rr align= ,rleftrrrefimg= frhttpi/dlocdlhost/portdl/firani亡/th巳口已

44、s/ired/im&g巳s/di&log/confirm dialog.gif" height=,r70rf disabled= rffalserr t已文字居左"tip"文字居左"</fw:button>(注:使用图片时的按钮tag用法)click:点击按钮后调用的处理两数名称disabled:初始化吋按钮的状态，false表示激活状态，truo表示禁用状态text:按钮上的文字tip:鼠标移动到按钮上时的提示语句refimg:图片资源的绝対路径align:文字和图片的相对位置，相对位直均为文字相对图片的位證,有 cente

45、r, left, right, top, bottom 5 种相对位置 不使用tag标签的用法：var button = new buttoncoinp(p?irent, name, left, top, width, height, text, tip, reftmg, position, align, disabled, classname);不设定某一个参数时传入空串，其它的参数含义参考上而的参数说明。用户可调用的组件函数和组件事件说明/* 使按钮激活*/button. active ();/*使按钮禁用*/button, inactive();12. combocomp组件名称：com

46、bocomp组件类型：controls组件父类：basecomponent12.1组件说明下拉框控件，支持文字子项和图片子项两种形式。122组件最终效果展示v呼项2孑项4子项3（图3. 10-1文字子项的下拉框）（图3. 10-1图片子项的下拉框）12.3组件皮肤设置说明combobox. css对combocomp外观效果进行控制，使用者可以根据白己的喜好修改相关 的css文件或者垂新编写新的css文件來改变此控件外观，如了项选中状态的样式，竖直滑 动条的样式。12.4组件使用说明 使用tag标签的用法:<fw:combobox left=,r850r, width=r,80p top

47、=,150w readonly=,truep narae=r,comboboxrr><fw:option caption=项 1"比flings"显示在文字前的图片的绝对路径"value=,r01r,x/fw:option><fw:option c&ptiorp讦项2" <fw:option c&pcioif讦项3" <fu:option c&ptiorf讦项4" <fu:option captiorr"手项5" value=,r02frx/fw:o

48、ption> value=,r03 fpx/fv:option> value=,r04rrx/fw:option> value=f,05frx/fw:option></fw:coinbobox>(注：文字子项下拉框的tag用法)click:点击按钮后调用的处理函数名称reflmg:如果耍在文字项前显示图片，则需要通过此属性指定图片的绝对路径地址caption: value:了项的显示值 子项的真实值<f w: combobox lef t=r,850rr width= fr90rr top=rr3 60r, readonly= rrtruen name

49、 = ppcoinbobox 1 rr><f u: opt ionshow imgon 1 y =rf t r uefrvalue=rrl,rcaption=rr rrx/f w: opt ion><f w: opt ionshow iingon 1 y =,f t r uerrvalue=,r2 "capt ion=,f frx/f w: opt ion><f v: opt ionshow imgon 1 y =rr t r uevalue=rr3 rrcaption=rr fr></f w: opt ion></fw:c

50、ombobox>(注：图片子项下拉框的tag用法)showlmgonly:capion:使川图片子项的卜拉框的时候必须将此属性设置为true 表示每个子项图片资源的绝对地址 不使用tag标签的用法：对于文字子项的comboboxcombobox = newcombocomp(parent, name, left, top, width, height, readonly,position,''); combobox. createopion(caption, value, refimg, false, nul1, false);需要使用者自己指定的参数如下，其它已经给定的

51、参数是不能改变的：parent:此控件父控件name:此控件名称left:当控件设置绝对定位时，相对父控件的左侧x绝标值伸位：像索px)top:当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px)width：控件宽度height：控件高度，默认80pxreadonly:输入框是否为可读position：定位属性,绝对(absolute)还是相对(relative)对于图片子项的comboboxcombobox = newcombocomp(parent, name, left, top, width, height, readonly, position,'');c

52、ombobox1. createoption(caption, value,'', false, null, true); 需要使用者白己指定的参数参考“对于文字子项的combobox已经给定的参数是不能改变 的。caption:图片的绝对路径value:真实值用户可调用的组件函数和组件事件说明/* 得到所有的option项*/combobox. getoptions();/* 清除所有的option*/combobox. clearoptions();/* 设置选中项* ©param index要设st选屮项的索引值 */combobox.setselectedlt

53、em (index);/* 得到选择项的value值*/combobox. getvalue ();/* 得到指定value的索引值* value 指定的 value*/combobox. getvaluelndex(value);/* 得到选中项的index值*/combobox. getselectedlndex();/* 得到选屮项的值*/combobox.getselectedvalue();/* 得到选择项的caption*/combobox.getselectedcaption();/* 禁用此控件*/combobox. inactive();/* 激活此控件*/combobox.

54、 active();/* 暴露给用户可重载的函数* param newttem改变后的新值* ©param lastitem上一个选中的值*/combobox. valuechanged(newitem, lastitem);13. listtolistcomp组件名称：listtolistcomp 组件类型：controls组件父类：basecomponent13.1组件说明listtolist控件，提供便捷的可选值和已选值的互相切换。此控件是基于listcomp 控件的扩展型控件。13.2组件最终效果展示全部可选的值h4h50h6回00回¥已经选择的值（图 3. 11-

55、113.3组件皮肤设置说明i i stto i i st 控件)由于此控件依赖listcomp控件，所以此控件的外观由list控件控制。13.4组件使用说明 使用tag标签的用法：<fv: listtolist name=rrlisttolistrr left=,r50rr top=rr150rr vidth=,f400rr height=rr250rr><fu: lettiist caption= rrh0rr value=rrorrx/fv: leftlist><fv: leftlist caption= frhlrf value=rrlfrx/fv: leftlist><fu: leftlist caption= ,rh2rr vaiue=rr2rrx/fv: leftlist><fw: leftl