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>