解析Flex中List控件属性和事件用法-51CTO.COM

你对Flex控件中的List控件的用法是否熟悉，这里向大家简单描述一下List的属性和事件，该控件主要用于“竖向显示单列表数据项”。如果数据项过多，可以出现一个垂直滚动条。

Flex中List控件用法

1.List控件简介

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

继承关系如下：

ListListBaseScrollControlBaseUIComponentFlexSpriteSprite

◆子类：

FileSystemList,Menu,Tree

2.List控件属性与事件

名称描述

editable数据是否可编辑，值为"false|true"
editedItemPositionitemrenderer的位置，默认值为"Nodefault"
editorDataField"text"
editorHeightOffset="0"
editorUsesEnterKey="false|true"
editorWidthOffset="0"
editorXOffset="0"
editorYOffset="0"
imeMode="null"
itemEditor="TextInput"
itemEditorInstance="Currentitemeditor"
rendererIsEditor="false|true" #p#

3.List控件属性DataProvider，LabelFunction--ArrayCollection数据源绑定并自定显示信息

功能说明：

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

代码：

注：

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

4.List控件的属性dataTipFunction--显示文字提示

功能说明：

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

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

代码：

<fx:Script> 
<![CDATA[  
//数据源参考上例  
privatefunctionmyDataTipFunction(value:Object):String{  
return(value.label+"::"+value.data);  
}  
]]> 
</fx:Script> 
<mx:Listidmx:Listid="lst_exam" 
width="30%" 
dataProvider="{roleList}" 
labelField="label" 
showDataTips="true" 
dataTipFunction="myDataTipFunction"/>

注：

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

5.List控件属性wordWrap--如果文字过长，允许换行

功能说明：

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

代码：

<fx:Script> 
<![CDATA[  
//数据源参考上例  
]]> 
</fx:Script> 
<mx:Listidmx:Listid="lst_exam" 
dataProvider="{roleList}" 
labelField="label" 
width="220" 
height="200" 
variableRowHeight="true" 
wordWrap="true"/>

注：

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

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

功能说明：

自定义控件的交互底色

代码：

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

功能说明：

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

代码：

<fx:Script> 
<![CDATA[  
//数据源参考上例  
protectedfunctionlst_exam_itemClickHandler(event:ListEvent):void  
{  
vart:List=event.currentTargetasList;  
Alert.show(t.selectedItem.label+"::"+t.selectedItem.data);  
}  
]]> 
</fx:Script> 
<mx:Listidmx:Listid="lst_exam" 
width="30%" 
dataProvider="{roleList}" 
labelField="label" 
itemClick="lst_exam_itemClickHandler(event)"/>

【编辑推荐】

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

  <fx:Script> 
<![CDATA[  
importmx.collections.ArrayCollection;  
 
[Bindable]  
publicvarroleList:ArrayCollection  
=newArrayCollection([  
{label:"good",data:"isgood"},  
{label:"bad",data:"isbad"}  
]);  
privatefunctionlst_exam_getDispName(item:Object):String{  
varresult:String="";  
if(item.hasOwnProperty("label")){  
result+=item.label+",";  
}  
if(item.hasOwnProperty("data")){  
result+=item.data;  
}  
returnresult;  
}  
]]> 
</fx:Script> 
<mx:Listidmx:Listid="lst_exam" 
width="30%" 
dataProvider="{roleList}" 
labelFunction="lst_exam_getDispName" 
/>