解析Flex中List控件屬性和事件用法

作者：jeulivy 2010-08-12 13:59:37

本文向大家介紹一下Flex控件List的概念和用法，該Flex控件主要用于“豎向顯示單列表數(shù)據(jù)項(xiàng)”。如果數(shù)據(jù)項(xiàng)過多，可以出現(xiàn)一個垂直滾動條。

你對Flex控件中的List控件的用法是否熟悉，這里向大家簡單描述一下List的屬性和事件，該控件主要用于“豎向顯示單列表數(shù)據(jù)項(xiàng)”。如果數(shù)據(jù)項(xiàng)過多，可以出現(xiàn)一個垂直滾動條。

Flex中List控件用法

1.List控件簡介

該控件主要用于“豎向顯示單列表數(shù)據(jù)項(xiàng)”。如果數(shù)據(jù)項(xiàng)過多，可以出現(xiàn)一個垂直滾動條。

繼承關(guān)系如下：

ListListBaseScrollControlBaseUIComponentFlexSpriteSprite

◆子類：

FileSystemList,Menu,Tree

2.List控件屬性與事件

名稱描述

editable數(shù)據(jù)是否可編輯，值為"false|true"
editedItemPositionitemrenderer的位置，默認(rèn)值為"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數(shù)據(jù)源綁定并自定顯示信息

功能說明：

綁定ArrayCollection類型數(shù)據(jù)源，并自定義控件上的顯示信息

代碼：

注：

1.如果要顯示的信息直接是數(shù)據(jù)源中的一個屬性的值，可使用下面代碼指定
labelField="label"
labelField：指明顯示roleList對象中的哪個屬性，默認(rèn)值是"label"

4.List控件的屬性dataTipFunction--顯示文字提示

功能說明：

鼠標(biāo)指向每一個數(shù)據(jù)項(xiàng)，顯示提示信息

dataTipFunction和showDataTips為父類ListBase的屬性，具體參考《FLEX控件_ListBase》

代碼：

<fx:Script> 
<![CDATA[  
//數(shù)據(jù)源參考上例  
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.如果每一個數(shù)據(jù)項(xiàng)的提示信息恰好是另一個屬性的值，則直接使用下面代碼指定即可
dataTipField="data"//data表示roleList中的一個屬性
2.mx:linkBar和mx:ButtonBar由于沒有繼承ListBase，因此不能使用這個方法，本人也沒有找到具體方法實(shí)現(xiàn)本功能
3.用List控件最大的問題在于，數(shù)據(jù)之間沒有直線作間隔，不如LinkBar好看，這個問題待解決。#p#

5.List控件屬性wordWrap--如果文字過長，允許換行

功能說明：

如果顯示的數(shù)據(jù)項(xiàng)的文字過長，控件默認(rèn)為多余的文字不顯示，本功能指定控件將過長的數(shù)據(jù)項(xiàng)換行顯示

代碼：

<fx:Script> 
<![CDATA[  
//數(shù)據(jù)源參考上例  
]]> 
</fx:Script> 
<mx:Listidmx:Listid="lst_exam" 
dataProvider="{roleList}" 
labelField="label" 
width="220" 
height="200" 
variableRowHeight="true" 
wordWrap="true"/>

注：

1.利用wordWrap和variableRowHeight屬性，指定過長的數(shù)據(jù)項(xiàng)自動換行

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

功能說明：

自定義控件的交互底色

代碼：

7.List控件的事件itemClick--顯示選中數(shù)據(jù)項(xiàng)的所有屬性

功能說明：

先與數(shù)據(jù)源ArrayCollection綁定，當(dāng)點(diǎn)擊控件中的一個數(shù)據(jù)項(xiàng)時，顯示該數(shù)據(jù)項(xiàng)的所有屬性

代碼：

<fx:Script> 
<![CDATA[  
//數(shù)據(jù)源參考上例  
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)"/>

【編輯推薦】

常見Flex控件用法剖析
Flex與Flash關(guān)系揭秘
學(xué)習(xí)總結(jié) 在Flex中如何嵌入Flex字體
揭開Flex正則表達(dá)式的神秘面紗
Flex數(shù)據(jù)綁定及其使用頻繁的幾種情況

<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" 
/>

責(zé)任編輯：佚名來源： csdn.net

Flex List控件