1、 根据邮件状态呈现不同的图片
2、Flex date使用例子
3、 Flex动态曲线图
4、 Flex datagrid的itemClick事件举例
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" xmlns:DataGrid="DataGrid.*">
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection=new ArrayCollection([{name:"tu1",level:1},{name:"tu3",level:3},
{name:"tu2",level:2}]);
]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}" width="100%" height="100%" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="name"/>
<mx:DataGridColumn dataField="level">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Image source="{getImage(data)}" autoLoad="true">
<mx:Script>
<![CDATA[
public function getImage(data:Object):Object{
if(data.level=="1"){
return "assets/1.jpg";
}
if(data.level=="2"){
return "assets/2.jpg";
}
if(data.level=="3"){
return "assets/3.jpg";
}
return null;
}
]]>
</mx:Script>
</mx:Image>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
2、Flex date使用例子
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundGradientColors="[#ffffff, #ffffff]">
<mx:Script>
<![CDATA[
import mx.controls.DateField;
[Bindable]
private var today:Date = new Date(new Date().setHours(0,0,0,0));
[Bindable]
private var start:Date = today;
[Bindable]
private var end:Date = start;
//=======================================
//Event Handler
//=======================================
/*DateChange*/
private function onDateChangeHandler(event:Event):void //此种方式保证了endDate的日期值必然大于等于startDate的值
{
//var currentDF:DateField = DateField(event.currentTarget);
if(startDF.text != "")
{
start = startDF.selectedDate;
}
if(endDF.text != "")
{
this.end = endDF.selectedDate;
}
}
]]>
</mx:Script>
<mx:ApplicationControlBar width="446" dock="true">
<mx:Label text="开始日期:" />
<mx:DateField id="startDF" showToday="true" selectedDate="{start}" formatString="YYYY年MM月DD日"
selectableRange="{{rangeEnd:end}}" change="onDateChangeHandler(event)"/>
<mx:Label text="结束日期:"/>
<mx:DateField id="endDF" showToday="true" selectedDate="{end}" formatString="YYYY年MM月DD日"
selectableRange="{{rangeStart:start,rangeEnd:today}}" change="onDateChangeHandler(event)"/>
</mx:ApplicationControlBar>
</mx:Application>
3、 Flex动态曲线图
<?xml version="1.0"?>
<!-- Simple example to demonstrate the DateTimeAxis class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.charts.chartClasses.AxisLabelSet;
import mx.formatters.DateFormatter;
import mx.charts.chartClasses.IAxis;
import mx.collections.ArrayCollection;
[Bindable]
public var testDatas:ArrayCollection;
[Bindable]
private var maxDate:Date;
[Bindable]
private var minDate:Date;
private var timer:Timer;
private var dateFormat:DateFormatter = new DateFormatter();
private var dateVar:Date;
private function init():void {
dateFormat.formatString = "HH:NN:SS";
minDate = new Date();
var dx:Date = new Date();
dx.setMinutes(dx.getMinutes()+1, dx.getSeconds(), dx.getMilliseconds());
maxDate = dx;
dateVar = new Date();
testDatas = new ArrayCollection([{date: dateVar, valueTest: 101.71} ]);
timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, getDatas);
timer.start();
}
private function mylabel(labelValue:Object, previousValue:Object, d:IAxis):String {
var str:String = dateFormat.format(labelValue);
return str;
}
private function getDatas(et:Event):void {
var valueTestValue:int = Math.random()*50;
var dm:Date = new Date();
dm.setTime(dateVar.getTime());
dm.setSeconds(dm.getSeconds()+1, dm.getMilliseconds());
dateVar = dm;
if (dateVar.getTime()>maxDate.getTime()) {
maxDate = dateVar;
var dx:Date = new Date();
dx.setMinutes(dx.getMinutes()-1, dx.getSeconds(), dx.getMilliseconds());
minDate = dx;
}
testDatas.addItem({date: dateVar, valueTest: valueTestValue});
//Alert.show("list长度为: "+testDatas.length);
}
]]>
</mx:Script>
<mx:Panel title="DateTimeAxis Example" height="100%" width="100%">
<mx:LineChart id="mychart" height="100%" width="100%"
paddingRight="2" paddingLeft="3"
showDataTips="true" >
<mx:horizontalAxis>
<mx:DateTimeAxis dataUnits="seconds" interval="3" minimum="{minDate}" maximum="{maxDate}" labelFunction="mylabel" />
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="true" />
</mx:verticalAxis>
<mx:series>
<mx:LineSeries yField="valueTest" xField="date" displayName="TestData" dataProvider="{this.testDatas}"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>
4、 Flex datagrid的itemClick事件举例
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="450" fontFamily="宋体" fontSize="12" height="400">
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.*;
private var DataGrid1:DataGrid;
[Bindable]//原始数据
public var dataArr:Array = [{id:1,name:"苹果",count:100},
{id:2,name:"西瓜",count:200},
{id:3,name:"水蜜桃",count:50}]
private function addItem():void{
dataArr.push({id:uiId.value,name:uiName.text,count:uiCount.value})
DataGrid2.dataProvider = dataArr
}
private function delItem():void{
dataArr.pop();
DataGrid2.dataProvider = dataArr
}
private function itemClick(e:ListEvent):void {
//Alert.show(DataGrid2.columns[0].headerText);
var txt:String=""; //= "表头为: "+(e.target as DataGrid).columns[e.columnIndex].headerText+"\n"
// txt+="选中第 "+e.columnIndex+" 列\n"
// txt+="选中第 "+e.rowIndex+" 行\n"
// txt+="选中的行的数据为:\n"
// var dat:Object = (e.target as DataGrid).selectedItem
// for(var i:* in dat){
// txt+=" "+i+":"+dat[i]+"\n"
// }
txt+="选中的单元可格的数据为 "+(e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]+" \n"
Alert.show(txt)
}
]]>
</mx:Script>
<mx:DataGrid id="DataGrid2" itemClick="itemClick(event)" dataProvider="{dataArr}" width="430" y="10" x="10" height="208">
<mx:columns>
<mx:DataGridColumn headerText="序号" dataField="id"/>
<mx:DataGridColumn headerText="名称" dataField="name"/>
<mx:DataGridColumn headerText="数量" dataField="count" editorDataField="value"/>
</mx:columns>
</mx:DataGrid>
<mx:NumericStepper id="uiId" x="10" y="241" width="150"/>
<mx:TextInput id="uiName" x="10" y="288" width="150"/>
<mx:NumericStepper id="uiCount" x="10" y="335" width="150"/>
<mx:Label x="10" y="224" text="序号:"/>
<mx:Label x="10" y="271" text="名称:"/>
<mx:Label x="10" y="318" text="数量:"/>
<mx:Button click="addItem()" x="10" y="368" label="添加" width="150"/>
<mx:Button click="delItem()" x="290" y="368" label="删除最后一个" width="150"/>
</mx:Application>