列表控件的使用（一）

raymond.chen

浏览: 1418630 次
性别:
来自: 广州

最近访客更多访客>>

林祥纤

whzresponse

loginboot

vicento4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex3

Adobe XML 嵌入式生物

与列表相关的控件有：列表控件（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>