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
