Flex中itemRenderer的使用简介

itemRenderer渲染器在Flex应用中是相当重要的，它能够丰富List等容器的样式，将默认为label的<mx:List>中能够加入<mx:Image/><mx:But同/>等标签。
如下图所示：
[img]http://dl.iteye.com/upload/attachment/353285/49132eda-9d36-3e82-b835-895bc9d5bad9.png[/img]

这样<mx:List/>显示的内容更加丰富了。

那么如何操作渲染器中的元素们呢？例如点击上图中的“删除”（图片），将本条item删除。
尅通过在<mx:itemRenderer/>中的<mx:Image/>标签上添加事件来完成，

例如：
<mx:Image source="image/del.png" click="this.parentDocument.showMe(event)"/>
这样就可以到用到外部的showMe()方法了。
如果想通过这个<mx:Image/>标签传递值可以用一下方法


<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="image/stop.png")]
private var stop:Class;

[Bindable]
[Embed(source="image/play.png")]
private var play:Class;

private function showMe(event:MouseEvent):void{
Alert.show((event.currentTarget as Image).data.toString());
}

]]>

<mx:XML id="tempXML">
<root>
<name>sdfaasdfadfd</name>
</root>
<root>
<name>oooooooo</name>
</root>
</mx:XML>


<mx:List dataPrivoder="{tempXML.root}">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{this.parentDocument.stop}"
data="{data.name}"
click="this.parentDocument.showMe(event)"/>
</mx:Component>
</mx:ItemRenderer>
</mx:List>

注意： <mx:Image/>标签中是通过data="{data.name}"来存储值的
路径source="{this.parentDocument.stop}"通过this.parentDocument来调用外部绑定的图片。
点击事件 click同理。
下附代码：