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> 

 

 

 

可能是复杂了点走了弯路，但做出来了也高兴一下！