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.用到的图片:
完成。