Flex itemRenderer 内联渲染器

1.需要理解的概念。  要理解 itemRenderer, 您必须理解它们为何变成现在这样以及我们当初设计它们时的目的。在此, 当我用到“我们”时, 我指的是 Adobe Flex 设计小组。我与它没有关系。言归正传, 假设您要显示 1,000 条记录。如果您认为列表控制会创建 1,000 个 itemRenderer, 您就错了。如果列表只显示 10 行, 它会创建约 12 个 itemRenderer－这些足以显示各个可见行, 多出的几个则用于缓冲和性能。列表最初显示行 1–10。当用户滚动这个列表时, 它现在可能显示行 3-12。但那 12 个 itemRenderer 仍在那里: 及时滚动列表后, 也不会新建任何 itemRenderer。

以下是 Flex 执行的操作。滚动列表时, 那些依然显示相同数据 (行 3-10) 的 itemRenderer 将向上移动。它们并未发生任何变化, 只是移到了新位置。之前显示行 1 和 行 2 数据的 itemRenderer 现在移到行 10 的 itemRendere 下。然后, 为那些 itemRenderer 提供行 11 和 行 12 的数据。换言之, 除非您调整列表大小, 否则将重用/循环使用那些相同的 itemRenderer－它们只是移到新位置并且现在显示新数据

内联 itemRenderer 直接写入 MXML 文件中列表控制出现的位置。内联 itemRenderer 最简单, 一般用于十分简单的渲染器或用于为较大的应用程序构建原型。内联 itemRenderer 本身并没有问题, 但随着代码变得复杂, 最好将它提取到自己的类中.

2.下面是一个tileList的内置渲染器的例子。这个例子中的<fx:Script>将checkbox的状态信息写入了绑定的数组fields，用于后面获取信息。

<mx:TileList id="tilelist_field"
                                 columnWidth="100"
                                 dataProvider="{fields}"
                                 borderVisible="false"
                                 height="{hGroup_middle.height-25}"
                                 width="100%">
                        <mx:itemRenderer>
                            <fx:Component>
                                <mx:HBox horizontalAlign="left"
                                         horizontalScrollPolicy="off">
                                    <fx:Script>
                                        <![CDATA[
                                            protected function checkbox1_clickHandler(event:MouseEvent):void
                                            {
                                                data.selected=(event.target as CheckBox).selected;
                                            }
                                        ]]>
                                    </fx:Script>
                                   
                                    <mx:CheckBox height="18"
                                                 label="{data.name}"
                                                 click="checkbox1_clickHandler(event)"
                                                 selected="{data.selected}"
                                                 toolTip="{data.name}"/>
                                </mx:HBox>
                            </fx:Component>
                        </mx:itemRenderer>
</mx:TileList>

 

3.也可以将内联 itemRenderer 用于 DataGrid。以下是应用于列的一个示例，本例中的 <mx:Script> 块

    用于覆盖 set data 函数, 使得 itemRenderer 的背景色可以更改。

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
    <mx:columns>
        <mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />
        <mx:DataGridColumn headerText="Author" dataField="author" width="125"/>
        <mx:DataGridColumn headerText="Title" dataField="title">
            <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>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

4.<mx:Component> 被视为外部定义类。

  从 <mx:Component> 中定义的变量仅作用于那个组件/内联 itemRenderer。

  同样, <mx:Component> 外的内容在不同的作用范围内, 就像这个组件是在另一个文件中定义的那样。
  outerDocument 标识符将作用范围更改为查找文件或外部文档, 并引用 <mx:Component>

 

本文摘自：http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt1.html