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

NC Rich Client轻量级组件技术红皮书NC-UAP 5.0用友NC-UAP2020-01-021第 页目 录第一章前言11.文档介绍12.概述13.组件整体继承关系介绍1第二章各组件详细设计与使用方法介绍21.BaseComponent22. ModalDialogComp2.ConfirmDialogComp53.MessageDialogComp64.WarningDialogComp75.ErrorDialogComp96.ProgressDialogComp107.PanelComp118.TabComp129.ButtonComp1410.ComboComp1611.ListToListComp1912.StringTextComp2213.IntegerTextComp2414.DateTextComp2515.FloatTextComp2616.TreeViewComp2717.OutLookBarComp3118.SliderbarComp3319.GridComp35第 52 页第一章 前言1. 文档介绍 文档目的该文档主要面向NC Rich Client的开发和使用人员，通过系统介绍每个组件的构成，外观定制(css),使开发人员具体了解每个组件的结构，使使用人员了解每个组件的使用方法，能够轻松自如的使用每个组件。 文档范围NC Rich Client的维护，作用于组件的开发阶段和维护阶段。 读者对象NC Rich Client轻量级组件的开发人员、维护人员、项目负责人、项目核查人员及使用人员。 术语与缩写解释缩写、术语解 释组件、控件在本文档中均指NC Rich Client中的轻量级控件2. 概述在为传统的web应用编写HTML页面的时候，页面编写者只有非常有限的一套预定义GUI组件，即HTML表单元素。他们的特征集在近10年的时间里几乎没有什么变化，与现代的GUI工具集相比，它们是非常基础的。如果页面作者希望引入树控件或者可编辑的栅格、日历控件或者分级菜单之类的，就需要借助于基础文档元素的底层编程。由于开发Portal的需要，为了Portal更具实用性和易用性，同时随着Ajax技术的逐渐流行，客户端的重视程度日益提高，为了很好的利用Ajax技术提高web界面的响应速度，并带给用户更好的浏览体验，开发一套适用于portal并具有一定灵活性和可扩展性的基础控件库也成了势在必行的工作。 3. 组件整体继承关系介绍由于JavaScript代码均是下载到客户端解释执行，所以为了减轻客户端压力，类的继承层次不能太深，否则在客户端运行时代码的执行速度就会变慢，生成的原始js代码就会增多，考虑这个效率原因，NC Rich Client的大部分组件均采用一级继承，即直接继承自基类BaseComponent。4. NC Rich Client组件特色1 通过prototype属性建立面向对象的轻量级控件库2 接口标准化,比如所有事件触发以onXX开放3 支持动态更改皮肤外观。尽量以css将展现分离，支持单个控件的各个细节的自定义外观修改4 将控件本身与数据绑定分离。树控件，grid控件均采用MVC设计模式实现5 使控件适应于tag和ajax等多种环境6 提供丰富的控件类别。Rich Client控件库提供了几十种轻量级控件，完全满足大多数Web应用的需要7 同时对各个控件，进行尽量轻度的封装，减轻客户端压力8 提供完善的js调试方式。比如WatchTime(监测代码执行时间)和log(前台日志)注意: 控件使用过程中，如果要销毁一个控件，必须调用destroySelf方法，这样才能保证控件所占用资源完全被释放5. Rich Client控件的一些开发规范1. 如果子控件的显示对象不是Div_gen,必须覆盖getObjHtml()方法返回真正的显示对象2. 如果objHtml是显示对象，那么使用objHtml.owner可以得到控件的数据对象3. 如果obj是数据对象，那么使用obj.parentHtml可以得到父控件的显示对象4. 如果obj是数据对象，那么使用obj.parentOwner可以得到父控件的数据对象5. 基类BaseComponent采用了template pattern设计模式为控件放入父控件的过程提供了统一的流程，子类必须实现manageSelf方法,子控件在放入父控件后会调用此方法6. 子控件兼听父控件的大小改变调整自己的大小，子控件如果需要改变自己的大小必须提供adjustSelf方法第二章 各组件详细设计与使用方法介绍1. BaseComponent组件名称：BaseComponent 组件类型：所有控件的基类 1.1 组件说明所有控件基类,包含了所有控件的共同属性和操作方法，此类不需要用户主动调用。以下给出了这个类的详细函数原型描述。1.2 函数介绍Constructor SummaryBaseComponent(name, left, top, width, height) Parameters: name - 控件名称 left - 控件左部x坐标 top - 控件顶部y坐标 width - 控件宽度 height - 控件高度 void add(ObjHtml) 添加子控件默认方法.如果需要特殊控制,需覆盖此方法 Parameters: ObjHtml - 子控件对象的显示对象 void addContextMenu(menu) 添加控件的右键菜单 Parameters: menu - 要添加的ContextMenuComp控件 void destroySelf() 销毁控件 Object getCompHeight() 得到组件的height属性 Object getCompWidth() 得到组件的width属性 Object getContentHeight() 得到容器内容部分的高度. Object getContentWidth() 得到容器内容部分的宽度. Object getObjHtml() 获取控件的显示对象 void hide() 隐藏控件(显示属性是display) void hideV() 隐藏控件(显示属性是visibility) void manageSelf() 添加进父控件之后,如果控件需要依据父控件设定值,则覆盖此函数 void oncontextmenu(e) 默认控件右键菜单显示如果需要额外控制,覆盖此函数 void placeIn(parent) 将控件添加到父控件中,如有特殊要求,子控件可以覆盖此方法. Parameters: parent - 此控件将要放入的父容器组件 void setBounds(left, top, width, height) 设置控件边界值.子控件可根据实际情况覆盖此函数 Parameters: left - 控件左侧X坐标 top - 控件顶部Y坐标 width - 控件的宽度 height - 控件的高度 void setPosition(left, top) 设置控件位置 Parameters: left - 控件左侧X坐标 top - 控件顶部Y坐标 void setSize(width, height) 设置控件大小 Parameters: width - 控件的宽度 height - 控件的高度 void setZIndex(zIndex) 设置控件立体高度 Parameters: zIndex - 控件的第三维高度 void show() 显示控件(显示属性是display) void showV() 显示控件(显示属性是visibility) 2. ModalDialogComp组件名称：ModalDialogComp 组件类型：Container 组件父类：BaseComponent2.1 组件说明模态对话框控件，提供基本的状态对话框容器，同时由此派生一些常用对话框，比如MessageDialog,WarningDialog等2.2 函数介绍Constructor SummaryModalDialogComp(name, title, left, top, width, height, className) Parameters: name - 控件名称 title - 控件标题 left - 控件左部x坐标 top - 控件顶部y坐标 width - 控件宽度 height - 控件高度 className - css文件的名字 void add(objHtml) 给对话框添加一个组件,覆盖base的add方法 Parameters: objHtml - 显示对象 Object getContentPane() 得到内容面版 void hide() 隐藏模式对话框 void onAfterClose() 暴露的方法,在对话框关闭之后调用此方法 void onBeforeClose() 暴露的方法,在对话框关闭的时候调用此方法 void onClosing() 暴露的方法,对话框关闭时调用此方法 void setBounds(left, top, width, height) 重载父类的方法 Parameters: left - 新的左部x坐标 top - 新的顶部y坐标 width - 新宽度 height - 新高度 void setSize(width, height) 设置对话框大小Parameters: width - 新宽度 height - 新高度 void setTitle(title) Parameters: title - 标题文字 void show() 显示模式对话框 3. ConfirmDialogComp组件名称：ConfirmDialogComp 组件类型：Container 组件父类：ModalDialogComp3.1 组件说明此确认对话框是对ModalDialog的封装实现。在对话框底部添加了OK, Cancel按钮，使用者使用时只需提供Ok,Cancel相对应的处理函数，给出需要显示的内容信息即可。3.2 组件最终效果展示(图3.2-1 确认对话框)3.3 组件皮肤设置说明modaldialog.css是对Dialog外观整体的控制，包括字体，大小，标题背景，内容区背景等3.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息ok:点击确认后需要执行的函数名称cancel:点击取消后需要执行的函数名称l 不使用tag标签的用法confirmdialog = ConfirmDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgconfirmdialog.onOk = confirm; /把点击确认按钮后需要执行的函数名赋给onOk属性confirmdialog.onCancel = noconfirm; /把点击取消需要执行的函数名赋给onCancel属性l 构造函数说明Constructor SummaryConfirmDialogComp(name, title, left, top, msg, refImg, another) Parameters: name - 对话框名字 title - 对话框标题 msg - 需要显示的信息 refImg - 对话框左部要显示的图片(有默认图片) another - 由于确认对话框生命周期的特殊性,特殊时候需要另一个实例 l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了confirmdialog对话框实例void changeMsg(msg) 改变ConfirmDialogComp的显示信息 Parameters: msg - 要显示的确认文字Object getContentPane() 得到要添加内容的面板 Object onCancel() 暴露给用户覆盖的函数,点击取消按钮后调用此函数 Object onOk() 暴露给用户覆盖的函数,点击确认按钮后调用此函数 void hideDialog() 静态方法,隐藏对话框 Object showDialog(message, okFunc, cancelFunc, obj1, obj2, zIndex, another) 创建一个对话框的类方法 Parameters: message - 要显示的信息 okFunc - 点击确定按钮时调用的函数名 cancelFunc - 点击取消按钮时调用的函数名 obj1 - 调用okFunc函数的对象 obj2 - 调用cancelFunc函数的对象 another - 由于确认对话框生命周期的特殊性,特殊时候需要另一个实例 4. MessageDialogComp组件名称：MessageDialogComp 组件类型：Container 组件父类：ModalDialogComp4.1 组件说明MessageDialogComp组件,通过输入指定字符串和显示图片提供此对话框。4.2 组件最终效果展示(图3.3-1 消息对话框)4.3 组件皮肤设置说明modaldialog.css是对Dialog外观整体的控制，包括字体，大小，标题背景，内容区背景等4.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息l 不使用tag标签的用法messagedialog = MessageDialogComp.showDialog(msg);/ 用户需要显示的字符串代替msgl 构造函数说明Constructor SummaryMessageDialogComp(name, title, left, top, msg, refImg) Parameters: name - 控件的名称(也就是id) title - 对话框标题 left - 控件左部x坐标 top - 控件顶部y坐标 msg - 显示的信息,用户输入 refImg - 信息对话框左侧的显示图片的url l 用户可调用的组件函数和组件事件说明void changeMsg(msg) 改变MessageDialog的显示信息 Parameters: msg - 要显示的提示信息文字 void onclick() 暴露给用户覆盖的方法,点击确定按钮后调用此方法 void hideDialog() 静态方法,隐藏对话框 Object showDialog(message) 创建一个对话框的类方法 Parameters: message - 要显示的提示信息文字 5. WarningDialogComp组件名称：WarningDialogComp 组件类型：Container 组件父类：ModalDialogComp5.1 组件说明WarningDialogComp组件，通过显示输入字符串和警示图片提供此对话框。5.2 组件最终效果展示(图3.4-1 警告对话框)5.3 组件皮肤设置说明modaldialog.css是对Dialog外观整体的控制，包括字体，大小，标题背景，内容区背景等5.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息l 不使用tag标签的用法warningdialog = WarningDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgl 构造函数说明Constructor SummaryWarningDialogComp(name, title, left, top, msg, refImg) Parameters: name - 控件的名称(也就是id) title - 对话框标题 left - 控件左部x坐标 top - 控件顶部y坐标 msg - 显示的警告信息,用户输入 refImg - 警告对话框左侧的显示图片的url l 用户可调用的组件函数和组件事件说明void changeMsg(msg) 改变WarningDialog的显示信息 Parameters: msg - 要显示的警告信息文字 void onclick() 暴露给用户覆盖的方法 void hideDialog() 静态方法,隐藏对话框 Object showDialog(message) 创建一个对话框的类方法 Parameters: message - 要显示的警告信息 6. ErrorDialogComp组件名称：ErrorDialogComp 组件类型：Container 组件父类：ModalDialogComp6.1 组件说明ErrorDialogComp组件，通过显示输入字符串和错误图片提供此对话框。6.2 组件最终效果展示(图6.2-1 提示对话框)6.3 组件皮肤设置说明modaldialog.css是对Dialog外观整体的控制，包括字体，大小，标题背景，内容区背景等6.4 组件使用说明l 使用tag标签的用法msg：你需要显示的错误提示信息l 不使用tag标签的用法errordialog = ErrorDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgl 用户可调用的组件函数和组件事件说明void changeMsg(msg) 改变ErrorDialog的显示信息 Parameters: msg - 要显示的信息void onclick() 暴露给用户覆盖的方法 void hideDialog() 隐藏对话框 Object showDialog(message) 创建一个对话框的类方法 Parameters: message - 要显示的错误信息 7. ProgressDialogComp组件名称：ProgressDialogComp 组件类型：Container 组件父类：ModalDialogComp7.1 组件说明ProgressDialogComp组件，通过显示正在进行的动作描述告知用户正在进行的事情。7.2 组件最终效果展示(图7.2-1 进度对话框)7.3 组件皮肤设置说明modaldialog.css是对Dialog外观整体的控制，包括字体，大小，标题背景，内容区背景等7.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息l 不使用tag标签的用法progressdialog = ProgressDialogComp.showDialog(msg);/用需要显示的字符串代替msgl 构造函数说明Constructor SummaryProgressDialogComp(name, title, left, top, msg, refImg) Parameters: name - 控件的名称(也就是id) title - 对话框标题 left - 控件左部x坐标 top - 控件顶部y坐标 msg - 显示的进度提示信息,用户输入 refImg - 进度提示对话框左侧的显示图片的url l 用户可调用的组件函数和组件事件说明void changeMsg(msg) 改变ErrorDialog的显示信息 void hideDialog() 静态方法,隐藏对话框 Object showDialog(message) 创建一个对话框的类方法 8. DebugMonitor 组件名称：DebugMonitor 组件类型：Container 组件父类：8.1 组件说明前台调试监测器,为前台的js代码调试和性能监测提供了很大的便利1.监测javascript代码执行时间2.在debug模式下察看log3.动态执行给定js代码8.2 组件最终效果展示(图8.2-1 进度对话框)8.3 组件皮肤设置说明此控件的外观由tab.css和modaldialog.css共同决定8.4 组件使用说明用法 PageUtil中提供了简便的操作方法，只要使用lfw框架的产品均可以按如下方法使用，记前台log只需调用log(msg)方法， getWatch(funcName)方法得到时间表对象，调用此对象的start()方法可以启动时间表，调用stop()方法停止此时间表,，此时间表监测函数的执行时间将在调试对话框显示出来时展现。也可以直接使用该组件提供的内部方法实现PageUtil封装的简便方法Constructor SummaryDebugMonitor() Method Summaryvoid createJsCodeContent() 创建js代码执行面板 Object getLog() 得到Log监测器 Object getLogContent() 得到观察log的内容面板 Object getTimeContent() 得到观察执行时间的内容面板 Object getWatch(funcName) 得到时间表对象 Parameters: funcName - 监测执行时间的函数名称(用户自己指定),供monitor报告时间时显示用void hideMonitor() 隐藏调试对话框 void showMonitor() 显示调试对话框,察看信息 Constructor SummaryLogMonitor() 记录log信息 Method Summaryvoid clear() 清除log记录数组 void log( msg) 记录log信息 void report() 报告所有log信息 Constructor SummaryTimeMonitor() 测试javascript代码执行时间监测器 Method Summaryvoid clearWatches() 清除所有的watches Object getWatch(funcName) 得到指定id的watch对象 Object getWatches() 返回所有的watch对象 void report() 报告时间消耗 Constructor SummaryJsCodeExecutor() js代码执行器 Method Summaryvoid run(code) Constructor SummaryWatch() 时间表对象 Method Summaryvoid start() 启动计时器 void stop() 停止计时器 9. PanelComp组件名称：PanelComp 组件类型：Container 组件父类：BaseComponent9.1 组件说明Panel容器，提供基本的包装，任何控件都可以放入其中，可继承它实现滚动panel等。9.2 组件最终效果展示由于Panel面板本身没有任何色彩，所以不提供展示效果。9.3 组件皮肤设置说明panel.css是对PanelComp外观效果的控制，默认不提供任何效果，根据具体需要可以提供对panel边框、背景等效果的设置。9.4 组件使用说明l 使用tag标签的用法：name： 控件名称left: 当控件设置绝对定位时，相对父控件的左侧x坐标值(单位：像素px)top: 当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px) width: 宽度，可以采用百分比和像素两种height: 高度，可以采用百分比和像素两种scrollable:设置面板可否滚动parentFrm: 此控件的父控件名称。注：对于使用tag标签的方式，如果父控件不是NC RichClient组件库中的控件需要设定此值，否则tag中封装了自动寻找父控件的代码，使用者不需要自己指定。l 不使用tag标签的用法：var panel = new PanelComp(parent, name, left, top, width, height, position, scroll, className);position: 不指定默认采用绝对定位parent: 此控件的父控件，此控件依赖能定位自身的父控件定位自身位置l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了panel面版实例/* *设置面版的可滚动性* param scroll 是否可滚动 */panel.setScroll (scroll); /使用方法10. TabComp组件名称：TabComp 组件类型：Container 组件父类：BaseComponent10.1 组件说明tab页签控件，在点到不同的页时，该页的标签显示为活动状态，同时显示此页内容区的内容。10.2 组件最终效果展示 (图3.8-1 不同css文件控制下的皮肤外观)10.3 组件皮肤设置说明tab.css对TabComp外观效果进行控制，使用者可以根据自己的喜好改写相关的css文件或者重新编写新的css文件来改变此控件外观，如激活项的样式，字体样式，背静颜色等。10.4 组件使用说明l 使用tag标签的用法：name：控件名称left:当控件设置绝对定位时，相对父控件的左侧x坐标值(单位：像素px)top:当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px)width:宽度，可以采用百分比和像素两种height: 高度，可以采用百分比和像素两种tabItemWidth: 每一个页签项的宽度值(单位:像素px)l 不使用tag标签的用法：var tab = new TabComp(parent,name,left,top,width,height,tabItemWidth,position:,);item1=tab1.createItem(name,title);/通过调用createItem(name,title)创建子项l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了tab页签实例/* *由item项的名字得到item项的索引*param name item项的名字*/tab.getItemIndexByName(name); /使用方法/* *得到item的索引值(索引值从0开始)*param name item项的数据对象*/tab.getItemIndex(item);/* *得到当前的激活项*return 当前激活项的数据对象*/tab.getSelectedItem();/* *得到当前激活项的索引值*return 当前激活项的数据对象*/tab.getSelectedIndex();/* *暴露给用户进行覆盖的方法,此函数是点击事件传输的最上层,主要用于做一些统一处理的操作*注：e.triggerItem中绑定了当前触发的是哪个item子项*/tab.onclick = function(e)/TODO:用户自己的处理/* *当激活item位置变化时会掉用这个函数,用户可以重载此函数处理自己事情*param triggerItem 传入是谁激活的此item*param currItem 当前激活的item*param targetItem 将要被激活的item*/tab.beforeActivedTabItemChange = function(triggerItem, currItem, targetItem)/TODO:用户自己的处理注：以下的函数均假定已经生成了某一个tabitem子项实例/* *显示指定的tabItem标题名字*return item项标题*/tabitem.showTitle();/* *改变itemDiv的宽度*param delta 需要改变的宽度值 */tabitem.changeWidth(delta);/* *设置itemDiv的宽度*param width 新的的宽度值 */tabitem.setWidth(width);11. ButtonComp组件名称：ButtonComp 组件类型：Controls 组件父类：BaseComponent11.1 组件说明按钮控件，用户可以指定图片显示于按钮之上，可以指定文字和图片的相对位置。不传入图片路径则只显示文字。11.2 组件最终效果展示 (注:button1激活) (注:button1禁用)(图3.9-1 按钮控件)11.3 组件皮肤设置说明button.css对ButtonComp外观效果进行控制，使用者可以根据自己的喜好修改相关的css文件或者重新编写新的css文件来改变此控件外观，如按钮普通状态，激活状态，禁用状态的外观。11.4 组件使用说明l 使用tag标签的用法：(注：不使用图片时的按钮tag用法)(注：使用图片时的按钮tag用法)click:点击按钮后调用的处理函数名称disabled:初始化时按钮的状态，false表示激活状态，true表示禁用状态text:按钮上的文字tip:鼠标移动到按钮上时的提示语句refImg:图片资源的绝对路径align:文字和图片的相对位置，相对位置均为文字相对图片的位置,有center,left,right, top,bottom 5种相对位置l 不使用tag标签的用法：var button = new ButtonComp(parent, name, left, top, width, height, text, tip, refImg, position, align, disabled, className);不设定某一个参数时传入空串，其它的参数含义参考上面的参数说明。l 用户可调用的组件函数和组件事件说明/*使按钮激活*/button.active();/*使按钮禁用*/button.inactive();12. ComboComp组件名称：ComboComp 组件类型：Controls 组件父类：BaseComponent12.1 组件说明下拉框控件，支持文字子项和图片子项两种形式。12.2 组件最终效果展示 (图3.10-1 文字子项的下拉框) （图3.10-1 图片子项的下拉框）12.3 组件皮肤设置说明combobox.css对ComboComp外观效果进行控制，使用者可以根据自己的喜好修改相关的css文件或者重新编写新的css文件来改变此控件外观，如子项选中状态的样式，竖直滑动条的样式。12.4 组件使用说明l 使用tag标签的用法： (注：文字子项下拉框的tag用法)click:点击按钮后调用的处理函数名称refImg:如果要在文字项前显示图片，则需要通过此属性指定图片的绝对路径地址caption:子项的显示值value:子项的真实值 (注：图片子项下拉框的tag用法)showImgOnly:使用图片子项的下拉框的时候必须将此属性设置为truecapion:表示每个子项图片资源的绝对地址l 不使用tag标签的用法：对于文字子项的comboboxcombobox = newComboComp(parent,name,left,top,width,height,readonly,position, );Combobox.createOpion(caption,value,refImg,false,null,false);需要使用者自己指定的参数如下，其它已经给定的参数是不能改变的：parent:此控件父控件name：此控件名称left:当控件设置绝对定位时，相对父控件的左侧x坐标值(单位：像素px)top:当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px)width：控件宽度height：控件高度，默认80pxreadonly:输入框是否为可读position：定位属性，绝对(absolute)还是相对(relative)对于图片子项的comboboxcombobox = newComboComp(parent,name,left,top,width,height,readonly,position,);combobox1.createOption(caption,value,false,null,true);需要使用者自己指定的参数参考“对于文字子项的combobox”，已经给定的参数是不能改变的。caption:图片的绝对路径value: 真实值l 用户可调用的组件函数和组件事件说明/*得到所有的option项*/combobox.getOptions();/*清除所有的option*/combobox.clearOptions();/*设置选中项*param index 要设置选中项的索引值*/combobox.setSelectedItem (index);/*得到选择项的value值*/combobox.getValue();/*得到指定value的索引值*param value 指定的value*/combobox.getValueIndex(value);/*得到选中项的index值*/combobox.getSelectedIndex();/* 得到选中项的值*/combobox.getSelectedValue();/*得到选择项的caption*/combobox.getSelectedCaption();/*禁用此控件*/combobox.inactive();/*激活此控件*/combobox.active();/*暴露给用户可重载的函数*param newItem 改变后的新值*param lastItem 上一个选中的值*/combobox.valueChanged(newItem, lastItem);13. ListToListComp组件名称：ListToListComp 组件类型：Controls 组件父类：BaseComponent13.1 组件说明ListToList控件，提供便捷的可选值和已选值的互相切换。此控件是基于ListComp控件的扩展型控件。13.2 组件最终效果展示(图3.11-1 listtolist控件)13.3 组件皮肤设置说明由于此控件依赖ListComp控件，所以此控件的外观由List控件控制。13.4 组件使用说明l 使用tag标签的用法： leftlist是左侧的list选择框，rightlist是右侧的list选择框。caption:list中每一项的显示值value: list中每一项的真实值l 不使用tag标签的用法：listToList = new ListToListComp(parent,name,left,top,width,height,position,leftLabelName,rightLabelName);listToList.addItemToLeft(caption,value, ,false,0);listToList.addItemToRight(caption,value,false,0);需要使用者自己指定的参数如下，其它已经给定的参数是不能改变的：leftLabelName:左侧列表上label的名字，默认显示“全部可选的值”rightLabelName: 右侧列表上label的名字，默认显示“已经选择的值”caption: list中一项的显示值value: list中一项的真实值l 用户可调用的组件函数和组件事件说明/*向左侧list中添加值*param caption 此item的显示值*param value 此item的id,必须和其他item不同*param refImg 显示在文字前的图片的绝对路径,不指定则认为不需要显示此图片*param index 索引