Flex中itemRenderer的施用简介

Flex中itemRenderer的使用简介

itemRenderer渲染器在Flex应用中是相当重要的，它能够丰富List等容器的样式，将默认为label的<mx:List>中能够加入<mx:Image/><mx:But同/>等标签。
如下图所示：
Flex中itemRenderer的施用简介

这样<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同理。
下附代码：

Flex中itemRenderer的施用简介

相关推荐