flex自定义list显示成表格的样式，增加单击事件
flex自定义list展示成表格的样式，增加单击事件
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.用到的图片：
完成。