flex itemRenderer使用

Flex组件的项目渲染器(ItemRenderer)使用总结
http://blog.csdn.net/babylon_0049/archive/2009/05/22/4205484.aspx
理解 Flex itemRenderer – 第 1 部分: 内联渲染器
http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt1.html
理解 Flex itemRenderer – 第 2 部分: 外部渲染器
http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt2.html

首先简单说下外部渲染器的优势：
（1）itemRenderer 可轻松用于多个列表中
（2）代码更容易维护
（3）可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer

内外渲染器在使用上只是地方不同，用法基本一样，下面详细介绍内联渲染器的用法：

注：itemRenderer 是循环使用的，只负责处理收到的数据

itemRenderer中使用事件的三种方法：

一、在外部调用事件：

至于怎样在项目渲染器访问主调用应用中的成员，可用parentDocument来引用；
反过来，主调用应用要访问项目渲染器中的成员，一般都是通过在项目渲染器先派发事件，然后在主调用应用中注册事件侦听器来实现。

例如：在项目渲染器中点击图片事件，然后通知主调用应用

<mx:Image click=”this.parentDocument.imgclick(event)”
data=”{data.label}” source=”assets\tx.JPG” width=”40″/>

在主调用应用中定义：

 public function imgclick(evt:MouseEvent):void
{
      var img:Image=evt.currentTarget as Image;
      Alert.show(img.data.toString());
}

记住得是public的,不同类之间是无法访问私有方法的

二、直接在itemRenderer中内嵌事件：

如果在Component中直接定义事件，为报错：....（event）是一个为定义的方法.

这是因为所定义的事件是在文件的范围内而不是在<mx:Component>在作用范围内定义的，

使用outerDocument标识可以避开这个问题。

outerDocument标识符将作用范围更改为查找文件或外部文档, 并引用<mx:Component>。

<mx:Button label=”Buy” click=”outerDocument.buyBook(data)” />

现在请注意: 这个函数必须是公共函数, 而不是受保护或私有函数。

记住, <mx:Component>被视为外部定义的类。

例子：

<mx:Button label="Buy" fillColors="[0×99ff99,0×99ff99]">
      <mx:click>
             <mx:Script>
                    <![CDATA[
                        var e:BuyBookEvent = new BuyBookEvent();
                        e.bookData = data;
                        dispatchEvent(e);
                    ]]>
           </mx:Script>
        </mx:click>
</mx:Button>

在本例中, click事件会创建一个自定事件, 然后从 itemRenderer 中冒出, 并由可视链中的较高组件（Button）接收。

三、类似完整的MXML组件：

<mx:itemRenderer>
       <mx:Component>
              <mx:HBox paddingLeft="2">
                     <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void {
                                        super.data = value;
                                        var today:Number = (new Date()).time;
                                        var pubDate:Number = Date.parse(data.date);
                                       if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
                                      else setStyle("backgroundColor",0xffffff);
                                      }
                           ]]>
                  </mx:Script>
                  <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
                 <mx:Text width="100%" text="{data.title}" />
                 </mx:HBox>
        </mx:Component>
</mx:itemRenderer>