（XF - 6）AdvancedDataGrid 渲染器

可以通过创建自定义的条目渲染器(item renderers)或者条目编辑器(item editors)来定制AdvancedDataGrid中单元格的外观和行为…
在AdvancedDataGrid中使用条目渲染器(item renderers)

您可以通过创建自定义的条目渲染器(item renderers)或者条目编辑器(item editors)来定制AdvancedDataGrid中单元格的外观和行为。与DataGrid处理的方法类似，我们直接将条目渲染器(item renderers)或者条目编辑器(item editors)赋值给AdvancedDataGrid的列就可以了。关于 item renderers 和 item editors的更多介绍，请查看： Using Item Renderers and Item Editors。

AdvancedDataGrid在对于项目渲染器的支持上增加了一些新的特性，这些新的特性可以让您处理下面的操作：

创建非关联数据源数据的行或列。例如，您可以从数据源创建汇总行。
一个渲染器跨越多个列。
单列使用多个渲染器。例如，当显示分层数据时，基于分层中的级别同一列使用不同的渲染器。
注意：这些新的特性只支持项目渲染器；项目编辑器的用法和DataGrid中的用法相同。

使用项目渲染器

要使用AdvancedDataGrid控件中新的项目渲染器特性，您需要直接使用AdvancedDataGrid.rendererProviders属性将项目渲染器指定给AdvancedDataGrid控件本身，而不是像DataGrid中，指定给特定列。下面的示例中指定一个项目渲染器给Estimate列：

[xml]
<mx:AdvancedDataGrid>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
columnIndex="3"
columnSpan="1"
renderer="myComponents.EstimateRenderer"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
rendererProviders属性包含一个AdvancedDataGridRendererProvider实例数组。每个AdvancedDataGridRendererProvider实例定义一个项目渲染器个特性。

在前面的示例中，AdvancedDataGridRendererProvider实例表示，对于第3列使用EstimateRenderer，AdvancedDataGrid控件中的首列是列0，并且该渲染器跨越单列。如果您将columnSpan属性设置为0，该渲染器将横跨行的所有列。

不但可以将列索引指定渲染器，您还可以给某列指定一个id属性，然后将该列属性来将该列与渲染器关联。如下所示：

[xml]
<mx:AdvancedDataGrid>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn id="estCol" dataField="Estimate"/>
</mx:columns>

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
column="{estCol}"
columnSpan="1"
renderer="myComponents.EstimateRenderer"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
depth属性使得您可以将渲染器与AdvancedDataGrid控件的导航树层次结构中的特定层次关联，导航树的最顶级depth为1。下面示例将渲染器与导航树第三层关联：

[xml]
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
columnIndex="3"
depth="3"
columnSpan="1"
renderer="myComponents.EstimateRenderer"/>
</mx:rendererProviders>
在前面的示例中，AdvancedDataGrid控件将一直使用缺省的列渲染器直到您将导航树展开到第三层，这时候它才使用EstimateRenderer组件。您可以使用depth属性为同一列指定不同的渲染器，在depth属性指定树的每个层次使用的渲染器。

一个渲染器可以跨越多个列。在下面的示例中，您创建了一个横跨两列的渲染器：

<mx:AdvancedDataGrid>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn id="actCol" dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
</mx:columns>

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
column="{actCol}"
depth="3"
columnSpan="2"
renderer="myComponents.SummaryRenderer"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
前面示例使用单个渲染器跨越Actual和Estimate列来显示一个这些列数据的组合视图。要查看SummaryRenderer组件的某个实现，请查看“使用渲染器生成列数据”。

下表是AdvancedDataGridRendererProvider类中您可以用来配置渲染器的属性的描述：

属性

描述

column
使用渲染器的列的ID。如果您省略该属性，您可以使用columnIndex 属性来标识列。

columnIndex

使用渲染器的列索引，第一列的索引为0。

columnSpan

渲染器跨越的列数目。设置该属性为0表示横跨所有的列。缺省值为1。

dataField

给渲染器使用的数据源中的数据字段。该属性可选。

depth

在树的哪个深度使用渲染器，树的最顶级节点的深度为1。当只在树被展开到特定深度而不是在树中所有的节点使用渲染器时使用该属性。缺省情况下，该控件在树的所有级别使用渲染器。

renderer

渲染器。

rowSpan

渲染器跨越的行数，缺省值为1。

使用渲染器生成列数据

下面示例使用一个项目渲染器来计算AdvancedDataGrid控件列的差额，如下图片所示：


该示例定义了id为diffCol的列，该列不和数据源的任意数据字段关联。相应的，您使用rendererProvider 属性给列指定一个项目渲染器。该项目渲染器计算actual和estimate的差值，并将接着显示一个是否超过预算的消息。

下面的代码实现该示例：

[xml]
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

include "SimpleHierarchicalData.as";
]]>
</mx:Script>

<mx:AdvancedDataGrid width="100%" height="100%">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territory_Rep"
headerText="Territory Rep"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimate"/>
<mx:AdvancedDataGridColumn id="diffCol"
headerText="Difference"/>
</mx:columns>

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider column="{diffCol}"
depth="3" renderer="myComponents.SummaryRenderer"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>
以下是SummaryRenderer组件的代码：

[java]
<?xml version="1.0"?>
<!-- myComponents/SummaryRenderer.mxml -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center">
<mx:Script>
<![CDATA[

override public function set data(value:Object):void
{
// Calculate the difference.
var diff:Number =
Number(value["Actual"]) - Number(value["Estimate"]);
if (diff < 0)
{
// If Estimate was greater than Actual,
// display results in red.
setStyle("color", "red");
text = "Undersold by " + usdFormatter.format(diff);
}
else
{
// If Estimate was less than Actual,
// display results in green.
setStyle("color", "green");
text = "Exceeded estimate by " + usdFormatter.format(diff);
}
}
]]>
</mx:Script>

<mx:CurrencyFormatter id="usdFormatter" precision="2"
currencySymbol="$" decimalSeparatorFrom="."
decimalSeparatorTo="." useNegativeSign="true"
useThousandsSeparator="true" alignSymbol="left"/>
</mx:Label>
运行示例

使用横跨整行的项目渲染器

您可以在一个分层数据上使用某一项目渲染器设置其显示整行数据。下面示例是一个PieChart（饼图）控件来显示分层数据中的detail字段数据。每行包含的detail信息是各个代表的销售收入信息，下面是其中一个显示图表：

以下代码实现该示例：

[java]
<?xml version="1.0"?>
<!-- dpcontrols/adg/GroupADGChartRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"Barbara Jennings", region: "Arizona", total:70, children:[
{detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
{name:"Dana Binn", region: "Arizona", total:130, children:[
{detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
{name:"Joe Smith", region: "California", total:229, children:[
{detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
{name:"Alice Treu", region: "California", total:230, children:[
{detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
]}
]);
]]>
</mx:Script>

<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
variableRowHeight="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
<mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
</mx:columns>

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
dataField="detail"
renderer="myComponents.ChartRenderer"
columnIndex="0"
columnSpan="0"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>
您可以修改该示例以在单列中显示PieChart控件。在下面的例子中，增加了一个Detail列给该控件，然后将该控件指定为第2列的项目渲染器：

[java]
<?xml version="1.0"?>
<!-- dpcontrols/adg/GroupADGChartRendererOneRow.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"Barbara Jennings", region: "Arizona", total:70, children:[
{detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
{name:"Dana Binn", region: "Arizona", total:130, children:[
{detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
{name:"Joe Smith", region: "California", total:229, children:[
{detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
{name:"Alice Treu", region: "California", total:230, children:[
{detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
]}
]);
]]>
</mx:Script>

<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
variableRowHeight="true">
<mx:dataProvider>
<mx:HierarchicalData source="{dpHierarchy}"/>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
<mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
<mx:AdvancedDataGridColumn dataField="detail" headerText="Detail"/>
</mx:columns>

<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
dataField="detail"
renderer="myComponents.ChartRenderer"
columnIndex="2"/>
</mx:rendererProviders>
</mx:AdvancedDataGrid>
</mx:Application>