flex自定义list展示成表格的样式，增加单击事件

fengzheng0603

浏览: 72887 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

nickzero

he365277

liuxin99310

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

flex

flex自定义list展示成表格的样式，增加单击事件：下面是截图

1.主flex页面

<?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" 
			   xmlns:supportClasses="com.esri.ags.skins.supportClasses.*"
			   minWidth="955" minHeight="600"  
			   xmlns:List="components.List.*" creationComplete="application1_creationCompleteHandler(event)" >
	<s:layout>
		<supportClasses:AttachmentLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import events.ListClickEvent;
			
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			public var linename:String;
			
			
			[Bindable]
			private var valueAC:ArrayCollection = new ArrayCollection( [
				{ hour: "1",  value: 1500 },
				{ hour: "2",  value: 200 },
				{ hour: "3",  value: 500 },
				{ hour: "4",  value: 1200 },
				{ hour: "5",  value: 575 } ]);
			
			
			[Bindable]
			private var valueAC2:ArrayCollection = new ArrayCollection( [
				{ hour: "1",  value: 1000 },
				{ hour: "2",  value: 300 },
				{ hour: "3",  value: 700 },
				{ hour: "4",  value: 1200 },
				{ hour: "5",  value: 500 } ]);
			
			protected function mylist1_listItemClickHandler(event:ListClickEvent):void
			{
				trace(event.lablepinyi);
				var lablepinyi:String=event.lablepinyi;
				if(lablepinyi=="cuijiang" || lablepinyi=="yutan" )
				{
					linechart.dataProvider=valueAC;
				}else{
					linechart.dataProvider=valueAC2;
				}
				
				linename=event.lablename;
			}

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				linename="翠江";
				linechart.dataProvider=valueAC;
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<mx:SolidColorStroke id = "s2" color="blue" weight="2"/>
		<s:ArrayList id="lylist">
			<fx:Object number="1" drainagebasin="翠江"  hour="13" arealRainfall="-999"  level="无风险" pingyin="cuijiang"/>
			<fx:Object number="2" drainagebasin="万安"  hour="13" arealRainfall="-999"  level="低风险" pingyin="wanan"/>
			<fx:Object number="3" drainagebasin="渔谭"  hour="13" arealRainfall="-999"  level="中风险" pingyin="yutan"/>
			<fx:Object number="4" drainagebasin="常山"  hour="13" arealRainfall="-999"  level="高风险" pingyin="changshan"/>
		</s:ArrayList>
	</fx:Declarations>
	<s:VGroup gap="0">
		<s:BorderContainer  width="528" height="35" borderVisible="false" borderWeight="0" backgroundImage="@Embed('images/tableheader.png')">
			<s:HGroup paddingLeft="30" verticalAlign="middle" width="100%" height="100%" >
				<s:Label  text="各流域风险等级" color="0x0F6A95" fontSize="14" fontWeight="bold" fontFamily="宋体"/>
			</s:HGroup>	
		</s:BorderContainer>
		<s:BorderContainer  width="528" borderVisible="false">
			<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
				<s:fill>
					<s:SolidColor color="0xdbdbdb" />
				</s:fill>
			</s:Rect>
			<s:Rect left="1" right="1" top="0" bottom="1">
				<s:fill>
					<s:SolidColor color="0xebecec" />
				</s:fill>
			</s:Rect>
			<s:HGroup height="33" verticalAlign="middle" gap="0">
				<s:Label text="" color="0x333333" width="40"/>
				<s:Label text="序号" color="0x333333" width="80"/>
				<s:Label text="流域" color="0x333333" width="100"/>
				<s:Label text="累积小时" color="0x333333" width="100"/>
				<s:Label text="降雨量" color="0x333333" width="100"/>
				<s:Label text="风险等级" color="0x333333" width="105"/>
			</s:HGroup>	
		</s:BorderContainer>
		<List:MyList itemRenderer="components.List.MyListItemRenderer" listItemClick="mylist1_listItemClickHandler(event)"   width="528" height="150"  dataProvider="{lylist}"  borderVisible="false">	
		</List:MyList>
		<s:HGroup paddingTop="5" />
		<s:BorderContainer  width="528" height="35" borderVisible="false" borderWeight="0" backgroundImage="@Embed('images/tableheader.png')">
			<s:HGroup paddingLeft="30" verticalAlign="middle" width="100%" height="100%" >
				<s:Label  text="{linename}流域累计降水量图" color="0x0F6A95" fontSize="14" fontWeight="bold" fontFamily="宋体"/>
			</s:HGroup>	
		</s:BorderContainer>
		<s:Group>
			<s:Rect left="0" right="0" top="0" bottom="0">
				<s:stroke>
					<s:SolidColorStroke color="0xb9b9b9" weight="1"/>
				</s:stroke>
			</s:Rect>
			<mx:LineChart id="linechart" height="323" width="528"
						  paddingLeft="5" paddingRight="5" 
						  showDataTips="true" >
				
				
				<!--categoryField：横坐标数据节点-->
				<mx:horizontalAxis>
					<mx:CategoryAxis id="h1" 
									 categoryField="hour"
									 title="时间（h）"/>
				</mx:horizontalAxis>
				
				<mx:horizontalAxisRenderers>
					<mx:AxisRenderer placement="bottom" axis="{h1}" />
				</mx:horizontalAxisRenderers>
				
				<!--纵坐标-->
				<mx:verticalAxisRenderers>
					<mx:AxisRenderer placement="left" axis="{v1}" />
				</mx:verticalAxisRenderers>
				
				<!--yField:纵坐标数据节点-->
				<mx:series>						
					<!--纵坐标轴1-->
					<mx:LineSeries id="cs1" horizontalAxis="{h1}" form="curve"  yField="value" displayName="时间（h）/降水量（MM）" lineStroke="{s2}">
						<mx:verticalAxis>
							<mx:LinearAxis id="v1" title="降水量（MM）"/>
						</mx:verticalAxis>
					</mx:LineSeries>
					
				</mx:series>
			</mx:LineChart>
		</s:Group>			
	</s:VGroup>
</s:Application>

2.自定义的事件类，传递点击表格的内容

package events {
	import flash.events.Event;
	
	public class ListClickEvent extends Event {
		public var lablepinyi:String;
		public var lablename:String;

		public function ListClickEvent(type:String, lablepinyi:String,lablename:String ) {
			super(type, true);
			this.lablepinyi = lablepinyi;
			this.lablename = lablename;
		}
		
		override public function clone():Event {
			return new ListClickEvent( type, lablepinyi,lablename );
		}
	}
}

3.自定义的List类：

package components.List
{
	import spark.components.List;
	
	[Event(name="listItemClick",type="events.ListClickEvent")]
	public class MyList extends List
	{
		public function MyList()
		{
			super();
		}
	}
}

4.自定义的list呈示器：

<?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:Metadata>
		[Event(name="listItemClick",type="events.ListClickEvent")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import events.ListClickEvent;
			
			import mx.controls.Alert;
			
			protected function getColor(data:Object):uint
			{
				var lindex:int= Number(data.number.toString());
				if(lindex%2==0){
					return 0xf5f6f6;
				}else{
					return 0xffffff;
				}
			}
			
			
			protected function getColorRect(data:Object):uint
			{
				var level:String= data.level.toString();
				if(level=="无风险"){
					return 0x008aff;
				}else if(level=="低风险"){
					return 0xfdd868;
				}else if(level=="中风险"){
					return 0xff861a;
				}else if(level=="高风险"){
					return 0xff001e;
				}else {
					return 0x008aff;
				}
			}
			

			protected function bordercontainer1_clickHandler(event:MouseEvent):void
			{
				var listclickevent:ListClickEvent=new ListClickEvent("listItemClick",data.pingyin,data.drainagebasin);
				dispatchEvent(listclickevent);
			}

		]]>
	</fx:Script>
	<s:BorderContainer  width="528" borderVisible="false" click="bordercontainer1_clickHandler(event)">
		<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
			<s:fill>
				<s:SolidColor color="0xdbdbdb" />
			</s:fill>
		</s:Rect>
		<s:Rect left="1" right="1" top="0" bottom="1">
			<s:fill>
				<s:SolidColor  color="{getColor(data)}"/>
			</s:fill>
		</s:Rect>
		<s:HGroup height="33" verticalAlign="middle" paddingLeft="40" gap="0">
			<s:Label text="{data.number}" color="0x666666" width="80"/>
			<s:Label text="{data.drainagebasin}" color="0x666666" width="100"/>
			<s:Label text="{data.hour}" color="0x666666" width="100"/>
			<s:Label text="{data.arealRainfall}" color="0x666666" width="100"/>
			<s:Rect  left="0" right="0" top="0" bottom="0"  width="10" height="10" >
				<s:stroke>
					<s:SolidColorStroke color="0xb9b9b9" weight="1"/>
				</s:stroke>
				<s:fill>
					<s:SolidColor color="{getColorRect(data)}"/>
				</s:fill>
			</s:Rect>
			<s:Label  paddingLeft="5" text="{data.level}" color="0x666666" width="95"/>
		</s:HGroup>
	</s:BorderContainer>
</s:ItemRenderer>

5.用到的图片：

完成。