Ans:

The example are following in which you can see how item renderer created and called.

mail.mxml

<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]                
private var myDP:ArrayCollection = new ArrayCollection([
{Name:"LG", Image1:'../assets/lg.png', Price:"9000Rs"},
{Name:"LG Flat", Image1:'../assets/lgflat.png', Price:"12000Rs"},
{Name:"Samsung", Image1:'../assets/samsung.png', Price:"15000Rs"},
{Name:"Philips", Image1:'../assets/philips.png', Price:"14000Rs"},
{Name:"Videocon", Image1:'../assets/videocon.png', Price:"25000Rs"},
{Name:"Onida", Image1:'../assets/onida.png', Price:"18000Rs"}
]);               
]]>
</fx:Script>
<s:Panel title="Custom Spark Item renderer Example" 
 width="365" height="358" 
 chromeColor="#000000" color="#FFFFFF" 
 backgroundColor="#000000" textAlign="center"> 
<s:BorderContainer borderStyle="inset" 
   borderVisible="true" 
   borderColor="yellow" 
   borderAlpha="1.0" 
   cornerRadius="30" 
   borderWeight="2" 
   backgroundColor="#000000" height="305" 
   width="342" x="11" y="10">
<s:SkinnableDataContainer dataProvider="{myDP}" 
  itemRenderer="imgeitem" 
  x="9" y="11">
<s:layout>
<s:TileLayout/>
</s:layout>
</s:SkinnableDataContainer>
</s:BorderContainer>
</s:Panel>
</s:Application>

imageitem.mxml(itemrenderer)

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" 
autoDrawBackground="false">
<s:VGroup horizontalAlign="center">
<mx:Image id="albumImage" source="{data.Image1}" 
  height="100" width="100"/>
<s:Label text="{data.Name}" color="#FFFFFF" 
 fontFamily="Verdana"/>
<s:Label text="Price:{data.Price}" color="#FFFFFF" 
 fontFamily="Verdana"/>
</s:VGroup>
</s:ItemRenderer>