Flex DataGrid渲染圖檔

初學flex，遇到一個問題‘在datagrid的一列中利用它的值轉換顯示不同的圖檔’，在網上搜了搜問了問，解決了哎,解決辦法貼出來，希望對其他人有幫助，

利用datagrid的labelFunction解決的，如下：

在datagrid的

<mx:DataGridColumn  dataField="level"  labelFunction="formatiImg"/>

 private var itemRenderImg:PerfStutsIFactory = new PerfStutsIFactory();

     private function formatiImg(item:Object,column:DataGridColumn):void{

         itemRenderImg.data=item;

         column.itemRenderer=itemRenderImg; 

     }

需要轉換datagrid裡面就做這些，其中PerfStutsIFactory 為一個實作了IFactory接口的類，代碼如下：

PerfStutsIFactory.as

package  com.vv.shop.fx

{

 import mx.core.IFactory;

 public class PerfStutsIFactory implements IFactory  

    {  

     public var data:Object;

        public function PerfStutsIFactory(){  

            super();  

        }  

        public function newInstance():*{  

            //執行個體化渲染器，實作具體功能  

          var  imgRenderer:ImgPerfRenderer =  new ImgPerfRenderer();  

               imgRenderer.data=data;

             return imgRenderer;

        }  

    }  

} 

然後就看具體的實作類了，ImgPerfRenderer.mxml,在這個裡面進行資料到不同圖檔的轉換吧，代碼如下：

ImgPerfRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?>

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0.0" width="100%"   

     horizontalAlign="center">    

 <mx:Script>

  <![CDATA[

   import mx.controls.Alert;

    [Bindable]

    private var url:String;

  [Embed(source="/com/vv/shop/fx/style/image/perfRed.png")]   //紅

        private var perfRedIcon:Class;  

        [Embed(source="/com/vv/shop/fx/style/image/perfOrange.png")]   //橙

        private static const OrangeIcon:Class;  

        [Embed(source="/com/vv/shop/fx/style/image/perfPrimary.png")]   //黃

        private static const PrimaryIcon:Class;  

        [Embed(source='/com/vv/shop/fx/style/image/perfBlue.png')]//藍

  private static const  BlueIcon:Class;

        [Embed(source="/com/vv/shop/fx/style/image/perfGreen.png")]   //綠

        private static const GreenIcon:Class;  

   public function gifUrl(data:Object):Object

   {

    //data 是從父頁面datagarid裡面穿過來的級别。根據級别進行圖檔選擇呈現。

    // if(data==null) return null;            

            if(data.perf_level!=null&&"1"==data.level){return GreenIcon;}

            if(data.perf_level!=null&&"2"==data.level){return BlueIcon;}

            if(data.perf_level!=null&&"3"==data.level){return PrimaryIcon;}

            if(data.perf_level!=null&&"4"==data.level){return OrangeIcon;}

            if(data.perf_level!=null&&"5"==data.level){return RedIcon;}

            return GreenIcon;            

   }   

  ]]>

 </mx:Script>

 <mx:Image id="Readleve" source="{gifUrl(this.data)}"/>

</mx:HBox> 

可能是複雜了點走了彎路，但做出來了也高興一下！