DataGrid com Itemrenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="434" height="182"
label="DataGrid com Item Render"
creationComplete="init()">
<mx:DataGrid id="myDataGrid" x="10" y="10" width="414" height="162">
<mx:columns>
<mx:DataGridColumn width="30" itemRenderer="{ImageEditRenderer}"/>
<mx:DataGridColumn headerText="Name" dataField="Name"/>
<mx:DataGridColumn headerText="Gender" dataField="Gender" width="70"/>
</mx:columns>
</mx:DataGrid>
<mx:Component id="ImageEditRenderer">
<mx:VBox
width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle">
<mx:Image toolTip="{lblEdit.text}" buttonMode="true" useHandCursor="true" source="@Embed(source='assets/btnEdit.png')" />
<mx:Label id="lblEdit" text="Editar" visible="false"/>
</mx:VBox>
</mx:Component>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var arrGrid : ArrayCollection = new ArrayCollection();
public function init():void{
populateGrid();
}
public function populateGrid():void{
arrGrid = new ArrayCollection([{Name:"James" , Gender:"M"}, {Name:"Monique" , Gender:"F"}, {Name:"Timoti" , Gender:"M"}]);
myDataGrid.dataProvider = arrGrid;
}

]]>

</mx:Script>

</mx:Application>