1.List控件简介 该控件主要用于“竖向显示单列表数据项”。如果数据项过多,可以出现一个垂直滚动条。
继承关系如下:
List
子类:
, ,
2.List属性与事件 名称 描述
editable 数据是否可编辑,值为"false|true"
editedItemPosition item renderer的位置,默认值为"No default"
editorDataField "text"
editorHeightOffset="0"
editorUsesEnterKey="false|true"
editorWidthOffset="0"
editorXOffset="0"
editorYOffset="0"
imeMode="null"
itemEditor="TextInput"
itemEditorInstance="Current item editor"
rendererIsEditor="false|true"
3.属性DataProvider,LabelFunction--ArrayCollection数据源绑定并自定显示信息功能说明:
绑定ArrayCollection类型数据源,并自定义控件上的显示信息
代码:
import mx.collections.ArrayCollection;
[Bindable]
public var roleList:ArrayCollection
= new ArrayCollection([
{label:"good",data:"isgood"},
{label:"bad",data:"isbad"}
]);
private function lst_exam_getDispName(item:Object):String {
var result:String = "";
if(item.hasOwnProperty("label")){
result+= item.label+ ",";
}
if(item.hasOwnProperty("data")){
result+= item.data;
}
return result;
}
]]>
width="30%"
dataProvider="{roleList}"
labelFunction="lst_exam_getDispName"
/>
注:
1.如果要显示的信息直接是数据源中的一个属性的值,可使用下面代码指定
labelField="label"
labelField:指明显示roleList对象中的哪个属性,默认值是"label"
4.属性dataTipFunction--显示文字提示
功能说明:
鼠标指向每一个数据项,显示提示信息
dataTipFunction和showDataTips为父类ListBase的属性,具体参考《FLEX控件_ListBase》
代码:
//数据源参考上例
private function myDataTipFunction(value:Object):String {
return (value.label + "::" + value.data);
}
]]>
width="30%"
dataProvider="{roleList}"
labelField="label"
showDataTips="true"
dataTipFunction="myDataTipFunction"/>
注:
1.如果每一个数据项的提示信息恰好是另一个属性的值,则直接使用下面代码指定即可
dataTipField="data" //data表示roleList中的一个属性
2. mx:linkBar和mx:ButtonBar由于没有继承ListBase,因此不能使用这个方法,本人也没有找到具体方法实现本功能
3.用List控件最大的问题在于,数据之间没有直线作间隔,不如LinkBar好看,这个问题待解决
5.属性wordWrap--如果文字过长,允许换行
功能说明:
如果显示的数据项的文字过长,控件默认为多余的文字不显示,本功能指定控件将过长的数据项换行显示
代码:
//数据源参考上例
]]>
dataProvider="{roleList}"
labelField="label"
width="220"
height="200"
variableRowHeight="true"
wordWrap="true"/>
注:
1.利用wordWrap和variableRowHeight属性,指定过长的数据项自动换行
6.属性alternatingItemColors--指定控件的交互底色
功能说明:
自定义控件的交互底色
代码:
7.事件itemClick--显示选中数据项的所有属性
功能说明:
先与数据源ArrayCollection绑定,当点击控件中的一个数据项时,显示该数据项的所有属性
代码:
//数据源参考上例
protected function lst_exam_itemClickHandler(event:ListEvent):void
{
var t:List=event.currentTarget as List;
Alert.show(t.selectedItem.label+"::"+t.selectedItem.data);
}
]]>
width="30%"
dataProvider="{roleList}"
labelField="label"
itemClick="lst_exam_itemClickHandler(event)"/>
参考文献:
1.List control.
2.Add ToolTip in List/ComboBox Control. http://fhuan123.javaeye.com/blog/359029
阅读(4342) | 评论(0) | 转发(0) |