FLEX3体验：: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列：

程序代码

<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属性，然后将该列属性来将该列与渲染器关联。如下所示：

程序代码

<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。下面示例将渲染器与导航树第三层关联：

程序代码

<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 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组件的代码：

程序代码

?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信息是各个代表的销售收入信息，下面是其中一个显示图表：

img

以下代码实现该示例：

程序代码

<?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列的项目渲染器：

程序代码

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

《AdvancedDataGrid的使用》到此完成。