个人Flex知识库(2)

1、 根据邮件状态呈现不同的图片

<?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>