Flex实现DataGrid标签中嵌入图片

方法一、定义一个呈示器，由itemRenderer去引用

主应用文件标签：

<mx:DataGrid id="dgrWave" width="664" height="153" dataProvider="{obj}" sortableColumns="true" doubleClickEnabled="true"
itemDoubleClick="datagrid1_itemDoubleClickHandler(event)"
itemRollOver="datagrid1_itemRollOverHandler(event)" itemRollOut="datagrid1_itemRollOutHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="语音文件名" dataField="name" width="100"/>
<mx:DataGridColumn headerText="语音文件内容" dataField="content" dataTipField="content" showDataTips="true"/>
<mx:DataGridColumn headerText="操作" width="100" textAlign="center" itemRenderer="controls.DataGridItemRender"/>
</mx:columns>
</mx:DataGrid>

DataGridItemRender组件：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import components.IconUtility;

import mx.containers.TitleWindow;
import mx.controls.Alert;
import mx.controls.DataGrid;
[Bindable]
[Embed("../assets/play.png")]
public static var startIcon:Class;
[Bindable]
[Embed("../assets/stop.png")]
public static var stopIcon:Class;
[Bindable]
[Embed("../assets/noplay.png")]
public static var nostartIcon:Class;
[Bindable]
[Embed("../assets/nostop.png")]
public static var nostopIcon:Class;
]]>
</fx:Script>

<mx:LinkButton id="lbPlay" toolTip="试听" click="click_play()" icon="{nostartIcon}" />
<mx:LinkButton id="lbStop" toolTip="停止" click="click_stop()" icon="{nostopIcon}" enabled="false" />
</mx:HBox>

方法二、

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx: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}]);

private var url:String = http://www.163.com;

]]>
</fx:Script>
<mx:DataGrid dataProvider="{ac}" width="100%" height="100%" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="名称" dataField="name"/>
<mx:DataGridColumn dataField="level">
<mx:itemRenderer>
<fx:Component>
<mx:HBox>
<mx:Image source="{getImage(data)}" autoLoad="true">
<fx:Script>
<![CDATA[
public function getImage(data:Object):Object{

//outerDocument.url访问DataGrid 外属性,可以得到上面URL的值
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;
}
]]>
</fx:Script>
</mx:Image>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

</s:Application>