<?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">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import spark.events.IndexChangeEvent;
			import spark.events.ListEvent;
			[Bindable]
			private var array:ArrayCollection = new ArrayCollection([{id : 1, city : "北京"}, {id : 4, city : "天津"}, {id : 3, city : "上海"}]);

			private function onIndexChangeHandler(event:IndexChangeEvent):void
			{
				var value:String = ls.selectedItem.city;
				Alert.show(value, "prompt");
			}

		]]>
	</fx:Script>
	<s:List id="ls" dataProvider="{array}" labelField="city" x="87" y="101" width="144" change="onIndexChangeHandler(event)" itemRenderer="com.dys.custom.itemrenderer.CustomListItemRender"/>
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
				xmlns:s="library://ns.adobe.com/flex/spark"
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="true">

	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;

			override public function set data(value:Object):void
			{
				this.sn.text = String(this.itemIndex + 1);
				this.txt.text = value.city;
			}
		]]>
	</fx:Script>

	<s:Label id="sn" x="0"/>
	<s:Label id="txt" x="30"/>
</s:ItemRenderer>