Flex控件List用法指南

开发 后端
本文主要向大家描述一下Flex控件List的概念,该Flex控件主要用于“竖向显示单列表数据项”。如果数据项过多,可以出现一个垂直滚动条。

本文和大家重点讨论一下Flex控件List的概念和用法,该Flex控件主要用于“竖向显示单列表数据项”。如果数据项过多,可以出现一个垂直滚动条。

Flex控件List

1.List控件简介

该Flex控件主要用于“竖向显示单列表数据项”。如果数据项过多,可以出现一个垂直滚动条。

继承关系如下:

ListListBaseScrollControlBaseUIComponentFlexSpriteSprite

子类:

FileSystemList,Menu,Tree

2.Flex控件List属性与事件

名称描述

  1. editable数据是否可编辑,值为"false|true"  
  2. editedItemPositionitemrenderer的位置,默认值为"Nodefault"  
  3. editorDataField"text"  
  4. editorHeightOffset="0" 
  5. editorUsesEnterKey="false|true" 
  6. editorWidthOffset="0" 
  7. editorXOffset="0" 
  8. editorYOffset="0" 
  9. imeMode="null" 
  10. itemEditor="TextInput" 
  11. itemEditorInstance="Currentitemeditor" 
  12. rendererIsEditor="false|true" 
  13.  

 #p#
3.属性DataProvider,LabelFunction--ArrayCollection数据源绑定并自定显示信息

功能说明:

绑定ArrayCollection类型数据源,并自定义Flex控件上的显示信息

代码:

  1. <fx:Script> 
  2. <![CDATA[  
  3. importmx.collections.ArrayCollection;  
  4.  
  5. [Bindable]  
  6. publicvarroleList:ArrayCollection  
  7. =newArrayCollection([  
  8. {label:"good",data:"isgood"},  
  9. {label:"bad",data:"isbad"}  
  10. ]);  
  11. privatefunctionlst_exam_getDispName(item:Object):String{  
  12. varresult:String="";  
  13. if(item.hasOwnProperty("label")){  
  14. result+=item.label+",";  
  15. }  
  16. if(item.hasOwnProperty("data")){  
  17. result+=item.data;  
  18. }  
  19. returnresult;  
  20. }  
  21. ]]> 
  22. </fx:Script> 
  23. <mx:Listidmx:Listid="lst_exam" 
  24. width="30%" 
  25. dataProvider="{roleList}" 
  26. labelFunction="lst_exam_getDispName" 
  27. /> 
  28.  

 

注:

1.如果要显示的信息直接是数据源中的一个属性的值,可使用下面代码指定
labelField="label"
labelField:指明显示roleList对象中的哪个属性,默认值是"label"

4.属性dataTipFunction--显示文字提示

功能说明:

鼠标指向每一个数据项,显示提示信息

dataTipFunction和showDataTips为父类ListBase的属性,具体参考《FLEX控件_ListBase》

代码:
 

  1. <fx:Script> 
  2. <![CDATA[  
  3. //数据源参考上例  
  4. privatefunctionmyDataTipFunction(value:Object):String{  
  5. return(value.label+"::"+value.data);  
  6. }  
  7. ]]> 
  8. </fx:Script> 
  9. <mx:Listidmx:Listid="lst_exam" 
  10. width="30%" 
  11. dataProvider="{roleList}" 
  12. labelField="label" 
  13. showDataTips="true" 
  14. dataTipFunction="myDataTipFunction"/> 

注:

1.如果每一个数据项的提示信息恰好是另一个属性的值,则直接使用下面代码指定即可
dataTipField="data"//data表示roleList中的一个属性
2.mx:linkBar和mx:ButtonBar由于没有继承ListBase,因此不能使用这个方法,本人也没有找到具体方法实现本功能
3.用Flex控件List最大的问题在于,数据之间没有直线作间隔,不如LinkBar好看,这个问题待解决。#p#

5.属性wordWrap--如果文字过长,允许换行

功能说明:

如果显示的数据项的文字过长,Flex控件默认为多余的文字不显示,本功能指定控件将过长的数据项换行显示

代码:
 

  1. <fx:Script> 
  2. <![CDATA[  
  3. //数据源参考上例  
  4. ]]> 
  5. </fx:Script> 
  6. <mx:Listidmx:Listid="lst_exam" 
  7. dataProvider="{roleList}" 
  8. labelField="label" 
  9. width="220" 
  10. height="200" 
  11. variableRowHeight="true" 
  12. wordWrap="true"/> 

注:

1.利用wordWrap和variableRowHeight属性,指定过长的数据项自动换行

6.属性alternatingItemColors--指定Flex控件的交互底色

功能说明:

自定义Flex控件的交互底色

代码:

<mx:ListalternatingItemColors="[#66FFFF,#33CCCC]".../>#p#

7.事件itemClick--显示选中数据项的所有属性

功能说明:

先与数据源ArrayCollection绑定,当点击Flex控件中的一个数据项时,显示该数据项的所有属性

代码:

  1. <fx:Script> 
  2. <![CDATA[  
  3. //数据源参考上例  
  4. protectedfunctionlst_exam_itemClickHandler(event:ListEvent):void  
  5. {  
  6. vart:List=event.currentTargetasList;  
  7. Alert.show(t.selectedItem.label+"::"+t.selectedItem.data);  
  8. }  
  9. ]]> 
  10. </fx:Script> 
  11. <mx:Listidmx:Listid="lst_exam" 
  12. width="30%" 
  13. dataProvider="{roleList}" 
  14. labelField="label" 
  15. itemClick="lst_exam_itemClickHandler(event)"/> 
  16.  

【编辑推荐】

  1. Flex控件工具大全
  2. 详解Flex控件拖动技术
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

 

 

 

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-12 15:20:49

Flex Builde

2010-07-27 10:19:28

Flex

2010-08-09 12:42:16

Flex module

2010-08-04 14:07:59

Flex事件机制

2010-07-28 14:59:26

Flex字符串

2010-08-13 11:34:54

Flex自定义事件

2010-08-05 10:29:11

Flex效果

2010-08-13 12:54:20

Flex弹出窗口

2010-08-03 10:40:29

Flex代码格式化

2013-02-18 13:44:22

CSSSASSWeb

2010-07-26 17:09:00

Perl模块

2010-07-26 14:54:07

Perlsplit函数

2010-07-26 15:27:50

Perl foreac

2010-08-10 14:18:15

RationalFunFlex

2010-07-21 10:10:50

Perl split函

2010-08-16 15:11:02

DIV

2010-08-12 13:59:37

FlexList控件

2010-07-23 15:51:27

Perl开发工具

2010-07-19 15:25:39

Perl标量转换函数

2010-07-21 09:38:51

点赞
收藏

51CTO技术栈公众号