列表控件的使用（一）
与列表相关的控件有：列表控件（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：拖动滚动条时触发。
三）范例源码
1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 3 <mx:Script> 4 <![CDATA[ 5 import mx.controls.Alert; 6 import mx.events.ListEvent; 7 8 [Embed(source='images/gif-0252.gif')] 9 public var myItemIcon:Class; 10 11 //自定义控件中标签的内容 12 private function labelFunc(item:Object):String{ 13 //return item.label + "(" + item.key + ")"; 14 return item.label; 15 } 16 17 private function dataTipFunc(item:Object):String{ 18 return item.label + ", " + item.key; 19 } 20 21 /* 22 * direction：滚动条的方向，取值有：vertical、horizontal 23 * position：滚动条离控件顶端的距离 24 */ 25 private function scrollTipFunc(direction:String, position:Number):String{ 26 if(direction == "vertical"){ 27 return "查看其它条目"; 28 } 29 return ""; 30 } 31 32 //单击数据条目时触发该事件 33 private function itemClickEvent(event:ListEvent):void{ 34 //Alert.show(event.target.selectedItem.label,"提示",Alert.OK,p1); 35 } 36 37 private function itemEditBeginningEvent(event:ListEvent):void{ 38 msg.text = "开始编辑条目：" + event.target.selectedItem.label; 39 } 40 41 private function itemEditEndEvent(event:ListEvent):void{ 42 msg.text = "完成编辑条目：" + event.target.selectedItem.label; 43 } 44 ]]> 45 </mx:Script> 46 47 <!-- 以<mx:Model>标签定义数据 --> 48 <mx:Model id="model1"> 49 <subjects> 50 <subject label="语文" key="YW" itemIcon="myItemIcon"/> 51 <subject label="英语" key="YY" itemIcon="myItemIcon"/> 52 <subject label="数学" key="SX" itemIcon="myItemIcon"/> 53 <subject label="物理" key="WL" itemIcon="myItemIcon"/> 54 <subject label="化学" key="HX" itemIcon="myItemIcon"/> 55 <subject label="生物" key="SW" itemIcon="myItemIcon"/> 56 <subject label="政治" key="ZZ" itemIcon="myItemIcon"/> 57 <subject label="历史" key="LS" itemIcon="myItemIcon"/> 58 <subject label="地理" key="DL" itemIcon="myItemIcon"/> 59 </subjects> 60 </mx:Model> 61 62 <mx:Panel id="p1" x="10" y="10" width="326" height="265" layout="absolute" title="列表控件" fontSize="12"> 63 <mx:List x="10" y="10" width="153" fontSize="12" height="166" 64 dataProvider="{model1.subject}" 65 iconField="itemIcon" 66 showDataTips="true" 67 dataTipFunction="dataTipFunc" 68 showScrollTips="true" 69 scrollTipFunction="scrollTipFunc" 70 itemClick="itemClickEvent(event)" 71 editable="true" 72 itemEditBeginning="itemEditBeginningEvent(event)" 73 itemEditEnd="itemEditEndEvent(event)"/> 74 75 <mx:Label x="10" y="184" width="153" id="msg"/> 76 </mx:Panel> 77 78 </mx:Application>
三、水平列表控件（HorizontalList Control）的使用
当图片作为单独的条目而不是作为条目的图标出现时，需要使用自定义的条目渲染器，将其它控件或者自定义的组件嵌入到控件中。
1）使用图片控件作为条目渲染器
1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 3 <mx:Script> 4 <![CDATA[ 5 [Bindable] 6 private var cat: Array = ["images/info.png", "images/msg.png", "images/que.png", "images/warn.png"]; 7 ]]> 8 </mx:Script> 9 10 <mx:HorizontalList x="356" y="66" width="424" height="59" 11 columnCount="4" 12 columnWidth="80" 13 dataProvider="{cat}" 14 itemRenderer="mx.controls.Image"/> 15 16 </mx:Application>
2）使用自定义组件作为条目渲染器
在主文件向组件文件传值时，使用data对象。在组件文件中可以利用data加上”属性名“获得主文件的数据。
1、自定义组件名为ShengXiao，存放在com.cjm.controls包中。其源码如下：
1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="202" height="253"> 3 <mx:Image width="80" height="80" source="{data.src}"/> 4 <mx:Text width="80" textAlign="center" text="{data.label}"/> 5 </mx:VBox>
2、主文件源码
1 <?xml version="1.0" encoding="utf-8"?> 2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 3 <mx:Script> 4 <![CDATA[ 5 import mx.events.ListEvent; 6 7 //单击数据条目时触发该事件 8 private function itemClickEvent(event:ListEvent):void{ 9 msg2.text = "当前选择生肖为：" + event.target.selectedItem.label; 10 } 11 ]]> 12 </mx:Script> 13 14 <mx:Model id="sxData"> 15 <root> 16 <sx label="鼠" src="images/sx/png-1501.png"/> 17 <sx label="牛" src="images/sx/png-1502.png"/> 18 <sx label="虎" src="images/sx/png-1503.png"/> 19 <sx label="兔" src="images/sx/png-1504.png"/> 20 <sx label="龙" src="images/sx/png-1505.png"/> 21 <sx label="蛇" src="images/sx/png-1506.png"/> 22 <sx label="马" src="images/sx/png-1507.png"/> 23 <sx label="羊" src="images/sx/png-1508.png"/> 24 <sx label="猴" src="images/sx/png-1509.png"/> 25 <sx label="鸡" src="images/sx/png-1510.png"/> 26 <sx label="狗" src="images/sx/png-1511.png"/> 27 <sx label="猪" src="images/sx/png-1512.png"/> 28 </root> 29 </mx:Model> 30 31 <mx:Panel x="10" y="311" width="564" height="230" layout="absolute" title="水平列表控件" fontSize="12"> 32 <mx:HorizontalList x="10" y="10" width="480" height="140" 33 columnCount="6" 34 columnWidth="80" 35 dataProvider="{sxData.sx}" 36 itemClick="itemClickEvent(event)" 37 itemRenderer="com.cjm.controls.ShengXiao"/> 38 <mx:Text x="10" y="158" width="160" id="msg2"/> 39 </mx:Panel> 40 41 </mx:Application>
