理解 Flex itemRenderer - 第 2 部分: 外部渲染器(转)

[b]MXML ITEMRENDERER[/b]
在第 1 部分中, 您看到有一个复杂的 itemRenderer 用于 DataGrid:

<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>

itemRenderer 基于 HBox, 包含一个 Image 和一个 Text, 并且根据项目记录的 pubDate 字段设置背景色。可以使用以下步骤将同一 itemRenderer 编写为一个外部文件:

[*]如果您使用 Flex Builder, 请新建一个 MXML Component 文件 (我将我的文件命名为 [b]GridColumnSimpleRenderer[/b], 您可以随意命名), 将根标记设置为 HBox。不必担心大小。
[*]如果您只使用 SDK, 请新建一个 MXML 文件 (将它命名为 [b]GridColumnSimpleRenderer.mxml[/b]), 将根标记设置为 HBox。
[*]在文件打开时, 复制 <mx:HBox> 与 </mx:HBox> 之间的所有内容, 但不要复制那些标记, 因为文件中已有它们。结果应该如下:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	<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>

[*]保存此文件。

现在修改 DataGridColumn 定义, 方法是删除内联 itemRenderer 并将它替换为以下内容:

<mx:DataGridColumn headerText="Title" dataField="title"
itemRenderer="GridColumnSimpleRenderer">

现在运行这个应用程序。您会大吃一惊。因为行很高。这是因为 itemRenderer 上的 height="300"。
[b]决定 ITEMRENDERER 的宽度和高度[/b]
List 控制始终设置 itemRenderer 的宽度。本例中将忽略明确的 width="400"。您应当编写自己的 itemRenderer, 假设用户更改列或列表宽度是宽度会更改。

高度则是另一回事。如果列表设置了明确的 rowHeight, 它会将这个高度强加到各行, 忽略您对 itemRenderer 设置的任何高度。但是, 如果您将列表的 variableRowHeight 属性设置为 true, 则列表会慎重考虑 itemRenderer 的高度。在本例中, 高度明确设置为 300, 所以各行为 300 像素高。

要修复它, 请从 itemRenderer 文件中删除明确高度, 应用程序即可正确运行。
[b]动态更改 ITEMRENDERER[/b]
本例覆盖了 set data() 函数以检查数据并设置 itemRenderer 的 backgroundColor。这十分常见。覆盖 set data() 使您能截取为新行更改数据的时间, 并且您可以作出样式更改。
常见错误为:
[list]
[*]忘记调用 super.data = value;。这是致命错误－它会把 itemRenderer 弄乱。
[*]忘记重置样式 (如果任何测试失败)。当 pubDate 是将来时, 可能只设置颜色会比较诱人, 但您必须记住, itemRenderer 是循环使用的, 所以 else 语句很有必要。
[/list]