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>

你可能感兴趣的:(Flex,itemRenderer,component)