How to use Item Renderer in Flex

Item Renderer Is a greate feature provided by Flex. Using Item-Renderer you can Display Data In required manner. item-Renderer basically used with List Base Controls .i.e Data Grid, Combobox etc.

In addition to controlling the display of data using an item renderer, the DataGrid, List, and Tree controls let users edit the data. For example, you could let users update the Quantity column of a DataGrid control

In our Example we will see how to use renderers with

1)Use Item Renderer with Combobox.

2)use Item Renderer with DataGrid.

Like This You can also use it with different controls.

<?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" width="100%" height="100%" viewSourceURL="srcview/index.html">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection; 

[Bindable]public var _data:ArrayCollection = new ArrayCollection([{name:"Rabit",file:"a.gif"},

{name:"Bird",file:"b.gif"},{name:"Dyno",file:"c.jpg"},{name:"Fire",file:"d.jpg"}]);

]]>

</fx:Script>

<mx:VBox width="100%" height="100%">

<mx:DataGrid dataProvider="{_data}" width="100%" height="50%">

<mx:columns>

<mx:DataGridColumn dataField="name" headerText="File Name"/>

<mx:DataGridColumn dataField="File">

<mx:itemRenderer>

<fx:Component>

<mx:Image width="100" height="100" source="{data.file}"/>

</fx:Component>

</mx:itemRenderer>

</mx:DataGridColumn>

</mx:columns>

</mx:DataGrid>

<mx:ComboBox dataProvider="{_data}" text="">

<mx:itemRenderer>

<fx:Component>

<mx:Image width="100" height="100" source="{data.file}"/>

</fx:Component>

</mx:itemRenderer>

</mx:ComboBox>

</mx:VBox>

</s:Application>