flex的datagrid可以使用image

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();"
 xmlns="*" fontFamily="宋体" fontSize="12" width="540" height="440"
 paddingLeft="5" paddingTop="5" paddingRight="5" horizontalScrollPolicy="off"
  verticalScrollPolicy="off" xmlns:ns2="*">
<DelCom id="cDelCom" verifyView="{this}"/>
<mx:Script>
 <![CDATA[
  import mx.controls.Alert;
  import mx.managers.PopUpManager;   
  import mx.rpc.events.*;
  import mx.events.ListEvent;
import mx.collections.ArrayCollection;
[Embed("huatong0.gif")]public var img0:Class;
[Embed("huatong1.gif")]public var img1:Class;
[Bindable]public var expenses:ArrayCollection = new ArrayCollection([
        {cname:"qzc",phone:"621",state:0,level: 0, img: img0},
        {cname:"pengjie",phone:"677",state:3,level: 0, img: img0},
        {cname:"hants",phone:"623",state:5,level: 1, img: img1}]);
       
  private var selectedItems:Array = new Array();
  private var bpage:Boolean=false;
  private var i:int;
  private var str:String=""; 
  [Bindable]  
  private var itemsXML:XMLList;
  [Bindable]  
  private var dataXML:XMLList;   
  [Bindable]
        public var levels: Array = [ {label:"听说", data:"0"}, {label:"只听", data:"1"} ];    
  System.useCodePage=true;        
  private function init():void{       
  }
       
  //关闭页面
  public function funClose(k:int):void{
   if(0==k){
    parentApplication.tip.text="操作成功";
   }else{
    parentApplication.tip.text="没有完成";
   }   
   PopUpManager.removePopUp(this); 
  }   
 
<script src="http://hi.images.csdn.net/js/blog/tiny_mce/themes/advanced/langs/zh.js" type="text/javascript"></script> <script src="http://hi.images.csdn.net/js/blog/tiny_mce/plugins/syntaxhl/langs/zh.js" type="text/javascript"></script> >  public function changeitem(event:ListEvent):void{
   tip.text ="选择的电话号码是："+event.currentTarget.selectedItem.phone;   
  }
  private function statelabel(item:Object, column:DataGridColumn):String {
   if(item.state ==0)
      return "空闲";
   else if(item.state ==1)
      return "拨号中";
   else if(item.state ==2)
      return "振铃";
   else if(item.state ==3)
      return "通话中";
   else if(item.state ==4)
      return "不可用";
   else
    return "通话失败";
  }
  public function changelevel(event:Event,item:Object):void{
   item.level=1-item.level;
   if(0==item.level)
   { 
    item.img=img0;
   }else{
    item.img=img1;
   }
   event.target.source=item.img;
  }
 ]]>
</mx:Script>
<mx:Style source="call.css" />
<mx:Component id="levellst"><mx:Canvas>
         <mx:Image source="{data.img}" click="outerDocument.changelevel(event,data)"/>        
  </mx:Canvas>  </mx:Component>
<mx:Component id="action"><mx:HBox>
          <mx:Button label="断开"/>
         <mx:Button label="呼叫"/>
</mx:HBox>
    </mx:Component>
<mx:Panel title="呼叫状态" width="530" height="430" horizontalAlign="center" verticalAlign="middle">
<mx:Form styleName="frm">
 <mx:Grid styleName="tab">
  <mx:GridRow height="30">   
   <mx:GridItem styleName="tcell" width="500"> 
    <mx:Label text="主叫" />
    <mx:TextInput id="uname" text="6321" />
    <mx:Label id="tip" styleName="tip"/> 
   </mx:GridItem> 
  </mx:GridRow>  
  <mx:GridRow>   
   <mx:GridItem styleName="tc" width="500">
   <mx:VBox paddingBottom="5" paddingTop="5" paddingRight="0" paddingLeft="0">
    <mx:DataGrid paddingBottom="5" paddingTop="5" paddingRight="0" paddingLeft="0" id="datalist" dataProvider="{expenses}" itemClick="changeitem(event)" height="335">
    <mx:columns>
    <mx:Array>     
     <mx:DataGridColumn dataField="cname" headerText="姓名"/>    
     <mx:DataGridColumn dataField="phone" headerText="电话"/>
     <mx:DataGridColumn dataField="state" labelFunction="statelabel" headerText="状态"/>
     <mx:DataGridColumn dataField="level" itemRenderer="{levellst}" headerText="权限" width="50"/>
     <mx:DataGridColumn itemRenderer="{action}" headerText="操作" width="140"/>     
    </mx:Array>
    </mx:columns>
    </mx:DataGrid>    
   </mx:VBox>   
   </mx:GridItem>   
  </mx:GridRow>  
 </mx:Grid> 
</mx:Form>
</mx:Panel>
</mx:Application>