列表控件的使用（一）
与列表相关的控件有：列表控件（List Control）、水平列表控件（HorizontalList Control）、片式列表控件（TileList Control）、组合框控件（ComboBox Control）等。这些控件直接或间接地继承mx.controls.listClasses.ListBase类。
一、ListBase类
一）常用的属性
1、allowMultipleSelection：是否允许多项选择。默认为false。
2、dataProvider：数据提供者。
3、showDataTip：是否允许显示提示信息。
4、dataTipField：指明在数据中哪一部分，当鼠标停留在数据项上时，显示的提示信息。
5、dataTipFunction：指定的自定义方法返回显示的提示信息。
6、iconField：指定哪个数据字段值决定数据条目中的图标。
7、labelField：指定哪个数据字段作为控件中数据的标签。
8、labelFunction：自定义控件中数据标签的内容，而不用labelField中指定的值。
9、selectedIndex：选中条目的序号，没有选中任何条目时为-1。
10、selectedIndices：
11、selectedItem：选中条目的具体信息。
12、selectedItems：
13、variableRowHeight：是否允许每行的高度不同。
14、wordWrap：是否允许数据换行。
15、columnCount：表格的列数。
16、columnWidth：列宽。
17、rowCount：行数。
18、rowHeight：行高。
19、itemRenderer：条目渲染器，用于定制条目中显示的内容。
二）常用的事件
1、change：当selectedIndex、selectedItem属性值变化时触发。
2、itemClick：单击条目时触发。
3、itemDoubleClick：双击条目时触发。
4、itemRolOver：当鼠标停留在条目上时触发。
二、列表控件（List Control）的使用
一）常用的属性
1、editable：是否可编辑条目中的数据。默认为false。
2、showScrollTips：是否显示滚动条提示。
3、scrollTipFunction：定义显示滚动条提示的内容。
4、editedItemPosition：可编辑条目的起始位置。
二）常用的事件
1、itemEditBeginning：条目进入编辑状态时触发。
2、itemEditEnd：条目完成编辑时触发。
3、scroll：拖动滚动条时触发。
三）范例源码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ListEvent;
[Embed(source='images/gif-0252.gif')]
public var myItemIcon:Class;
//自定义控件中标签的内容
private function labelFunc(item:Object):String{
//return item.label + "(" + item.key + ")";
return item.label;
}
private function dataTipFunc(item:Object):String{
return item.label + ", " + item.key;
}
/*
* direction：滚动条的方向，取值有：vertical、horizontal
* position：滚动条离控件顶端的距离
*/
private function scrollTipFunc(direction:String, position:Number):String{
if(direction == "vertical"){
return "查看其它条目";
}
return "";
}
//单击数据条目时触发该事件
private function itemClickEvent(event:ListEvent):void{
//Alert.show(event.target.selectedItem.label,"提示",Alert.OK,p1);
}
private function itemEditBeginningEvent(event:ListEvent):void{
msg.text = "开始编辑条目：" + event.target.selectedItem.label;
}
private function itemEditEndEvent(event:ListEvent):void{
msg.text = "完成编辑条目：" + event.target.selectedItem.label;
}
]]>
</mx:Script>
<!-- 以<mx:Model>标签定义数据 -->
<mx:Model id="model1">
<subjects>
<subject label="语文" key="YW" itemIcon="myItemIcon"/>
<subject label="英语" key="YY" itemIcon="myItemIcon"/>
<subject label="数学" key="SX" itemIcon="myItemIcon"/>
<subject label="物理" key="WL" itemIcon="myItemIcon"/>
<subject label="化学" key="HX" itemIcon="myItemIcon"/>
<subject label="生物" key="SW" itemIcon="myItemIcon"/>
<subject label="政治" key="ZZ" itemIcon="myItemIcon"/>
<subject label="历史" key="LS" itemIcon="myItemIcon"/>
<subject label="地理" key="DL" itemIcon="myItemIcon"/>
</subjects>
</mx:Model>
<mx:Panel id="p1" x="10" y="10" width="326" height="265" layout="absolute" title="列表控件" fontSize="12">
<mx:List x="10" y="10" width="153" fontSize="12" height="166"
dataProvider="{model1.subject}"
iconField="itemIcon"
showDataTips="true"
dataTipFunction="dataTipFunc"
showScrollTips="true"
scrollTipFunction="scrollTipFunc"
itemClick="itemClickEvent(event)"
editable="true"
itemEditBeginning="itemEditBeginningEvent(event)"
itemEditEnd="itemEditEndEvent(event)"/>
<mx:Label x="10" y="184" width="153" id="msg"/>
</mx:Panel>
</mx:Application>
三、水平列表控件（HorizontalList Control）的使用
当图片作为单独的条目而不是作为条目的图标出现时，需要使用自定义的条目渲染器，将其它控件或者自定义的组件嵌入到控件中。
1）使用图片控件作为条目渲染器
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
private var cat: Array = ["images/info.png", "images/msg.png", "images/que.png", "images/warn.png"];
]]>
</mx:Script>
<mx:HorizontalList x="356" y="66" width="424" height="59"
columnCount="4"
columnWidth="80"
dataProvider="{cat}"
itemRenderer="mx.controls.Image"/>
</mx:Application>
2）使用自定义组件作为条目渲染器
在主文件向组件文件传值时，使用data对象。在组件文件中可以利用data加上”属性名“获得主文件的数据。
1、自定义组件名为ShengXiao，存放在com.cjm.controls包中。其源码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="202" height="253">
<mx:Image width="80" height="80" source="{data.src}"/>
<mx:Text width="80" textAlign="center" text="{data.label}"/>
</mx:VBox>
2、主文件源码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
//单击数据条目时触发该事件
private function itemClickEvent(event:ListEvent):void{
msg2.text = "当前选择生肖为：" + event.target.selectedItem.label;
}
]]>
</mx:Script>
<mx:Model id="sxData">
<root>
<sx label="鼠" src="images/sx/png-1501.png"/>
<sx label="牛" src="images/sx/png-1502.png"/>
<sx label="虎" src="images/sx/png-1503.png"/>
<sx label="兔" src="images/sx/png-1504.png"/>
<sx label="龙" src="images/sx/png-1505.png"/>
<sx label="蛇" src="images/sx/png-1506.png"/>
<sx label="马" src="images/sx/png-1507.png"/>
<sx label="羊" src="images/sx/png-1508.png"/>
<sx label="猴" src="images/sx/png-1509.png"/>
<sx label="鸡" src="images/sx/png-1510.png"/>
<sx label="狗" src="images/sx/png-1511.png"/>
<sx label="猪" src="images/sx/png-1512.png"/>
</root>
</mx:Model>
<mx:Panel x="10" y="311" width="564" height="230" layout="absolute" title="水平列表控件" fontSize="12">
<mx:HorizontalList x="10" y="10" width="480" height="140"
columnCount="6"
columnWidth="80"
dataProvider="{sxData.sx}"
itemClick="itemClickEvent(event)"
itemRenderer="com.cjm.controls.ShengXiao"/>
<mx:Text x="10" y="158" width="160" id="msg2"/>
</mx:Panel>
</mx:Application>
