Flex4中s:List组件的使用

1.先来一个最简单的例子，关于s:List的使用

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var array:ArrayCollection = new ArrayCollection([{id:1,city:"北京"},{id:1,city:"天津"},{id:3,city:"上海"}]);		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:List id="list1" dataProvider="{array}" labelField="city" x="87" y="101" width="144">
	</s:List>
</s:Application>

该例子使用ArrayCollection做为List的数据源，通过属性labelField="city"，将city的内容绑定到List上

 

2.下面我们来改造一下上面的例子，在每一列添加顺序号，并且添加每一行数据的单击事件

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			import spark.events.IndexChangeEvent;
			
			[Bindable]
			private var array:ArrayCollection = new ArrayCollection([{id:1,city:"北京"},{id:1,city:"天津"},{id:3,city:"上海"}]);


			protected function list1_changeHandler(event:IndexChangeEvent):void
			{
				Alert.show(list1.selectedItem.city);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:List id="list1" dataProvider="{array}" labelField="city" x="87" y="101" width="144" change="list1_changeHandler(event)">
		<s:itemRenderer>
			<fx:Component>
				<s:ItemRenderer>
					<fx:Script>
						<![CDATA[
							import mx.controls.Text;
							override public function set data(value:Object):void {
								sn.text = String(itemIndex+1);
								txt.text = String(value.city);
							}
						]]>
					</fx:Script>
					<s:Label id="sn" x="0" />
					<s:Label id="txt" x="30" />
				</s:ItemRenderer>
			</fx:Component>
		</s:itemRenderer>
	</s:List>
</s:Application>

这个例子中添加顺序号主要是通过复写set data方法来实现的。

 

3.在第1个例子基础上做修改，为List组件添加右键菜单

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
		
			[Bindable]
			private var cm:ContextMenu;
			
			[Bindable]
			private var array:ArrayCollection = new ArrayCollection([{id:1,city:"北京"},{id:1,city:"天津"},{id:3,city:"上海"}]);

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				cm = new ContextMenu();
				
				var cm1:ContextMenuItem = new ContextMenuItem("menu1",false);
				cm1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,item_selectHandler);
				
				var cm2:ContextMenuItem = new ContextMenuItem("menu2",false);
				cm2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT,item_selectHandler);
				
				cm.customItems.push(cm1);
				cm.customItems.push(cm2);
			}
			
			private function item_selectHandler(e:ContextMenuEvent):void{
				Alert.show((e.target as ContextMenuItem).caption);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:List id="list1" dataProvider="{array}" labelField="city" x="87" y="101" width="144" contextMenu="{cm}">
	</s:List>
</s:Application>