点击->Window->Preferences->Flex->Installed Flex SDKs
修改Flex SDKs 2.0 和 Flex SDKs 3.0的路径点Apply让设置成效.
此时就已经OK了你只需要重启Eclipse..就可以开发Flex了.

Dreamweaver默认打开后缀名为ctp的文件时，设计视图显示灰色，无法直接预览ctp文件样式；
需要进行以下修改：
1、便Dreamweaver能识别*.ctp文件，并当做html页面来处理，需要修改两个文件，
(1)Extensions.txt——位于你的用户目录下，如 C:\Documents and Settings\Administrator\Application Data\Adobe\Dreamweaver 9\Configuration\
(2)MMDocumentTypes.xml—-位于程序安装目录下，如D:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\DocumentTypes\
2、用编辑器打开MMDocumentTypes.xml，找到下面部分，并添加ctp，修改后如下：
<documenttype id=”PHP_MySQL” servermodel=”PHP MySQL\” internaltype=”Dynamic” winfileextension=”php,php3,php4,php5,ctp” macfileextension=”php,php3,php4,php5,ctp” file=”Default.php” writebyteordermark=”false”>
保存退出。winfileextension指的是在windows系统中的扩展，macfileextension是mac os系统中的扩展
需要注意的是，在同目录下和用户目录下，不能有同名文件，包括备份文件，否则在启动时会有“php已经被关联。。。”等警告信息。
经过这样设置，DW就可以识别*.ctp文件，并当作*.php来处

css页面里面不能有 @charset “utf-8″;

这段代码在萨法日下不能够被识别

    * 创建非关联数据源数据的行或列。例如，您可以从数据源创建汇总行。
    * 一个渲染器跨越多个列。
    * 单列使用多个渲染器。例如，当显示分层数据时，基于分层中的级别同一列使用不同的渲染器。

注意：这些新的特性只支持项目渲染器；项目编辑器的用法和DataGrid中的用法相同。

使用项目渲染器

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

rendererProviders属性包含一个AdvancedDataGridRendererProvider实例数组。每个AdvancedDataGridRendererProvider实例定义一个项目渲染器个特性。

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

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

depth属性使得您可以将渲染器与AdvancedDataGrid控件的导航树层次结构中的特定层次关联，导航树的最顶级depth为1。下面示例将渲染器与导航树第三层关联：

在前面的示例中，AdvancedDataGrid控件将一直使用缺省的列渲染器直到您将导航树展开到第三层，这时候它才使用EstimateRenderer组件。您可以使用depth属性为同一列指定不同的渲染器，在depth属性指定树的每个层次使用的渲染器。

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

前面示例使用单个渲染器跨越Actual和Estimate列来显示一个这些列数据的组合视图。要查看SummaryRenderer组件的某个实现，请查看“使用渲染器生成列数据”。

下表是AdvancedDataGridRendererProvider类中您可以用来配置渲染器的属性的描述：
属性                         描述
column                          使用渲染器的列的ID。如果您省略该属性，您可以使用columnIndex 属性来标识列。
columnIndex                使用渲染器的列索引，第一列的索引为0。
columnSpan               渲染器跨越的列数目。设置该属性为0表示横跨所有的列。缺省值为1。
dataField                  给渲染器使用的数据源中的数据字段。该属性可选。
depth                         在树的哪个深度使用渲染器，树的最顶级节点的深度为1。当只在树被展开到特定深度 而不是在树中所有的节点使用渲染器时使用该属性。缺省情况下，该控件在树的所有级别使用渲染器。
renderer               渲染器。
rowSpan             渲染器跨越的行数，缺省值为1。

使用渲染器生成列数据

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

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

下面的代码实现该示例：

以下是SummaryRenderer组件的代码：

运行睇下效果先
使用横跨整行的项目渲染器

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

img

以下代码实现该示例：

您可以修改该示例以在单列中显示PieChart控件。在下面的例子中，增加了一个Detail列给该控件，然后将该控件指定为第2列的项目渲染器：

《AdvancedDataGrid的使用》到此完成。

创建汇总行

您可以使用GroupingField类的summaries属性来创建分组数据的汇总数据，然后您可以将汇总数据与原来数据显示同一行中，也可以将其显示在单独一行中。

以下示例中，AdvancedDataGrid控件显示了两个汇总字段，Min Actual和Max Actual：

顶部行的Min Actual和Max Actual字段对应分组中所有行的汇总，而每个Territory的Min Actual和Max Actual字段对应该Territory子组中所有行的汇总。

以下是实际代码：

运行例子看看
注意在该示例中，我们将GroupingField.summaries属性指定为SummaryRow实例。SummaryRow包含数据汇总的所有信息。例如，我们使用SummaryRow的summaryPlacement属性来将汇总数据添加到分组数据中。可选的，您也可以增加一个新行来存放汇总数据。更多信息请查看“指定汇总数据存放位置“。

每个SummaryRow实例指定一个或多个用来创建数据汇总的SummayField 实例。例如，您可以使用SummayField的dataField属性来指定对Actual数据字段进行汇总,label属性用于指明存放汇总数据的数据字段的名称，而operation属性用于指定如何对数值字段几行汇总，您可以使用以下任一值：SUM、MIN、 MAX、AVG或COUNT。

加上了新的合计数据字段，在组件内部，代表分组数据的GroupingCollection其内容如下所示：

[b]使用GroupingField和SummaryRow类的缺省属性[/b]

GroupingField.summaries属性是GroupingField的缺省属性，而SummaryRow.fields属性是 SummaryRow类的缺省属性；因此，您可以在您的代码中省略这些属性而重写前面的示例，如下所示

指定汇总数据存放位置

SummaryRow类包含一个summaryPlacement属性用于决定在AdvancedDataGrid控件的那里显示汇总数据。summaryPlacement属性允许的值如下：

first 在分组的第一行创建汇总行。
last 在分组的最后一行创建汇总行。
group 将合计数据添加到对应的分组中。
在前面的“创建汇总中”小节中的示例已经演示了通过指定summaryPlacement属性值为group来将汇总数据添加到分组中。以下示例，使用相同的分组数据但是其summaryPlacement属性设置的是last：

您可以指定多个值给summaryPlacement属性，通过空格分隔，例如，指定“last group”这样的值表示同时在分组级别和分组的末行显示汇总数据。

这样，加上了新的合计数据字段，在组件内部，代表分组数据的GroupingCollection其内容如下所示：

注意，在整个组中添加了一个新行用于存放汇总数据，而且每个子组都添加了一个新行用于存放子组的汇总数据。

创建多个汇总

您可以在单个GroupingField实例中指定多个SummaryRow实例。在下面的示例中，我们定义如下字段为Region组创建汇总数据：Min Actual、Max Actual、Min Estimate和Max Estimate：

运行实例看看
创建列分组

您可以使用列分组将多列归集到一个单一列表头下，如下所示：

在该示例中，您可以提供给数据表格以扁平数据，然后对Actual和Estimate列归组到一个单一的名称为Revenues的列中。

要在一个AdvancedDataGrid控件中进行列分组，您必须如下做：

使用AdvancedDataGrid.groupedColumns属性而不是AdvancedDataGrid.columns属性来标识列。
使用AdvancedDataGridColumnGroup来指定分组。
下面是前面示意图中的AdvancedDataGrid控件的代码实现：

运行例子看看
groupedColumns 属性包括AdvancedDataGridColumn类和AdvancedDataGridColumnGroup类的实例。 AdvancedDataGridColumn类的实例在控件中显示为单独的一列。而所有在AdvancedDataGridColumnGroup实例中指定的列将作为已分组的列显示在一起。

您可以给控件添加多个分组，下面的示例增加名称为Area和Revenue的两个分组：

运行实例

您还可以将分组嵌套以让一个分组列包含多个分组，如下所示：

运行效果

在分组中拖放列

By default, you can drag the columns in a group within the group to reposition them. You can also drag the entire group to reposition it in the AdvancedDataGrid control. 默认情况下，您可以拖动分组中的各列以在分组中重新放置它们。您也可以拖动整个分组以在AdvancedDataGrid控件中重新放置它们。

要禁用某一分组中所有列的拖动，设置AdvancedDataGridColumnGroup.childrenDragEnabled属性为false。要禁用单个列的拖动，设置AdvancedDataGridColumn.dragEnabled属性为false。

对分层数据进行列分组

和扁平数据一样，您使用分层数据进行列分组，以下例子修改自“为导航树创建单独的列“章节中的示例以将Actual和Estimates列归组到Revenues组列中：

运行实例

上面的列分组示例中并没有为AdvancedDataGridColumnGroup类指定数据字段，但是，AdvancedDataGridColumnGroup类就是被设计用于和分层数据一起工作的。因此，如果您给 AdvancedDataGridColumnGroup类指定一个数据字段的话，它将自动给该数据字段的子字段创建一个列分组。

在下面示例中，HierarchicalDataForGroupedColumns.as文件定义了一个分层数据，设置Revenues字段包含俩个子字段，Actual 和Estimate：

下面示例使用该数据并且指定Revenues字段为AdvancedDataGridColumnGroup.dataField属性的值，其输出如下：

以下是实现代码：

运行实例

 程序代码

[ {rowIndex: selectedRowIndex1, columnIndex: -1},
  {rowIndex: selectedRowIndex2, columnIndex: -1},
  ...
  {rowIndex: selectedRowIndexN, columnIndex: -1}
]

singleCell 点击任意单元来选择该单元格。
在选择后，selectedCells包含一个单独对象：
[{rowIndex: selectedRowIndex, columnIndex:selectedColIndex}]
multipleCells 点击任意单元来选择该单元格。
对于非邻近单元，按下Control键时，点击任意单元格来选择多个非连续的单元格。
对于邻近单元，按下Shfit键时，点击任意单元格来选择多个连续的单元格。
选择后，每行在selectedCells保存为一个对象：

 程序代码

[ {rowIndex: selectedRowIndex1, columnIndex: selectedColIndex1},
  {rowIndex: selectedRowIndex2, columnIndex: selectedColIndex2},
  ...
  {rowIndex: selectedRowIndexN, columnIndex: selectedColIndexN}
]

以下示例设置selectionMode属性为multipleCells使得您可以选择表格中的多个单元。该应用使用KeyUp事件处理器来识别Control-C组合键，如果监听到，将选择的多个单元格从AdvancedDataGrid控件复制到系统剪贴板中。
在拷贝单元格后，您可以将这些单元格粘贴到Flex应用的其他位置中，或者将它们粘贴到其他应用如微软Excel。您可以将它们粘贴到应用底部的TextArea中去。

 程序代码

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import flash.events.KeyboardEvent;
            import flash.system.System;
            include "StyleData.as"
            // Event handler to recognize when Ctrl-C is pressed,
            // and copy the selected cells to the system clipboard.
            private function myKeyUpHandler(event:KeyboardEvent):void
            {
                var keycode_c:uint = 67;
                if (event.ctrlKey && event.keyCode == keycode_c)
                {
                    // Separator used between Strings sent to clipboard
                    // to separate selected cells.
                    var separator:String = ",";
                    // The String sent to the clipboard
                    var dataString:String = "";
                    // Loop over the selectedCells property.
                    // Data in selectedCells is ordered so that
                    // the last selected cell is at the head of the list.
                    // Process the data in reverse so
                    // that it appears in the correct order in the clipboard.
                    var n:int = event.currentTarget.selectedCells.length;
                    for (var i:int = 0; i < n; i++)
                    {
                        var cell:Object = event.currentTarget.selectedCells[i];
                        // Get the row for the selected cell.
                        var data:Object =
                        event.currentTarget.dataProvider[cell.rowIndex];
                        // Get the name of the field for the selected cell.
                        var dataField:String =
                        event.currentTarget.columns[cell.columnIndex].dataField;
                        // Get the cell data using the field name.
                        dataString = data[dataField] + separator + dataString;
                    }
                    // Remove trailing separator.
                    dataString =
                    dataString.substr(0, dataString.length - separator.length);
                    // Write dataString to the clipboard.
                    System.setClipboard(dataString);
                }
            }
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid width=”100%” height=”100%”
        dataProvider=”{dpADG}”
        selectionMode=”multipleCells”
        allowMultipleSelection=”true”
        keyUp=”myKeyUpHandler(event);”>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”Artist”/>
            <mx:AdvancedDataGridColumn dataField=”Album”/>
            <mx:AdvancedDataGridColumn dataField=”Price”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
    <mx:TextArea id=”myTA”/>
</mx:Application>

运行例子
分层和分组数据显示
AdvancedDataGrid支持分级和分组数据的显示，为了支持这样的显示，AdvancedDataGrid在第一列显示一个导航树以让您分级浏览数据。
分层数据（Hierarchical data）是一种以父子项目结构分层的数据，分组数据（Grouped data）是一开始就为平面的而无内在层次关系的数据。在将该数据传递给AdvancedDataGrid前，您可以指定一个或更多的数据字段将一组数据归组为同一层次。
以下文件中的代码演示分级数据示例：

 程序代码

//SimpleHierarchicalData.as:
[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", children: [
        {Region:"Arizona", children: [
            {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
            {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
        {Region:”Central California”, children: [
            {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
        {Region:”Nevada”, children: [
            {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
        {Region:”Northern California”, children: [
            {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
            {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
        {Region:”Southern California”, children: [
            {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
            {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
    ]}
]);

注意该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象，以下示例演示AdvancedDataGrid控件对该数据的显示效果：

该示例的代码在“控制导航树”章节中。
要显示扁平数据，在将其传递给AdvancedDataGrid前您首先要对数据进行归组。以下代码包含的是前面示例中分层数据的变异版本，其将数据组织为以平面结构：

 程序代码

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", Territory:"Arizona",
        Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
    {Region:"Southwest", Territory:"Arizona",
        Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
    {Region:"Southwest", Territory:"Central California",
        Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
    {Region:"Southwest", Territory:"Nevada",
        Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
    {Region:"Southwest", Territory:"Northern California",
        Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
    {Region:"Southwest", Territory:"Northern California",
        Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
    {Region:"Southwest", Territory:"Southern California",
        Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
    {Region:"Southwest", Territory:"Southern California",
        Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

在该示例中，数据只包含一个层面没有内在的层次的单独纪录,要归组该数据，您可以指定一个或更多的数据字段将该数据归组为同一层次。以下示例演示AdvancedDataGrid控件对平面数据通过Region字段进行的分组。

该示例代码在“显示分组数据“章节中
设置分层数据的数据源
要配置AdvancedDataGrid显示分级数据和导航树，您传递给dataProvider属性以HierarchicalData类或者 GroupingCollection类的实例，当您的数据以层次组织时使用HierarchicalData类。更多信息请查看“显示分层数据”。
当您的数据以平面结构组织时使用GroupingCollection类，作为配置一个GroupingCollection类的实例的一部分，您需要指定一个或更多的字段来将平面数据组织为同一层次。更多信息请查看“显示分组数据”。
您可以从任意数据创建一个HierarchicalData类或GroupingCollection类的实例来作为数据源。但是，AdvancedDataGrid控件按如下修改它为内部的数据表示：
一个数组实例在AdvancedDataGrid控件内部使用一个ArrayCollection类实例表示。
一个ArrayCollection在AdvancedDataGrid控件内部使用一个ArrayCollection类实例表示。
一个包含正确XML文本的字符串在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
一个XMLNode实例在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
一个XMLList实例在AdvancedDataGrid控件内部使用一个XMLListCollection类实例表示。
任何实现ICollectionView接口的对象在AdvancedDataGrid控件内部使用一个ICollectionView实例表示。
一个其他任意类型的对象被作为唯一的条目包裹在一个的数组示例中。
例如，如果您使用一个数组来创建HierarchicalData类的一个实例，并将该HierarchicalData实例传递给 AdvancedDataGrid.dataProvider属性，然后又从AdvancedDataGrid.dataProvider属性将其读回；您读回的数据将是一个ArrayCollection实例。
控制导航树
AdvancedDataGrid控件有时候因为该控件的第一列使用一个可缩放数来选择行的显示而被称作tree datagrid，唯一要记住的规则是该树总是显示在所有列的最左边。尽管在AdvancedDataGrid控件您可以任意组织列而不管数据是如何组织的。并且您可以通过拖动列来对AdvancedDataGrid控件上的列进行重新定位，但是导航树总是出现在列的最左边。
数据表格的第一列通常与该控件的数据源的某一字段关联。该数据字段用于为树节点标签命名。
在以下示例中，想您展示了“分层和分组数据显示”章节提到的AdvancedDataGrid控件分层结构数据的显示。该数据的顶层数据包含一个Region字段和多个第二层子对象，每个第二层子对象也包含一个Region字段和多个其他的子对象。
该示例中的AdvancedDataGrid控件定义了四列来显示数据：Region、Territory Rep、 Actual和Estimate。

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
    <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:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行实例
以下图片为上述示例创建的AdvancedDataGrid控件。该控件使用文件夹图标表示数据分支节点，使用文件图标代表叶子节点。控件的第一列和数据源的Region相关联。所以标签显示的是Region字段的值。
注意树的叶子图标没有显示标签。这是因为每个territory都没包含Region字段。下一章我们将描述怎样控制导航树的图标显示。

设置导航树图标和标签
导航树可以让您控制分支和叶子节点的图标和标签。您可显示一个有标签无图标的树、一个只有分支图标的树、一个所有都没有标签的树或者一个不与任何数据字段相关的自由列数。
以下表描述了AdvancedDataGrid控件用于设置树图标的样式属性：
样式属性 描述
defaultLeafIcon 指定叶子节点图标
disclosureClosedIcon 指定显示在封闭的分支节点前面的图标，缺省是一个黑三角形。
disclosureOpenIcon 指定显示在展开的分支节点前面的图标，缺省是一个黑三角形。
folderClosedIcon 为分支节点指定一个文件夹关闭图标
folderOpenIcon 为分支节点指定一个文件夹打开图标
以下示例设置缺省叶子图标为null以隐藏它，并且使用自定义的文件夹打开和关闭图标：

 程序代码

<?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%”
        defaultLeafIcon=”{null}”
        folderOpenIcon=”@Embed(source=’assets/folderOpenIcon.jpg’)”
        folderClosedIcon=”@Embed(source=’assets/folderClosedIcon.jpg’)”>
        <mx:dataProvider>
            <mx:HierarchicalData source=”{myHCollAC}”/>
        </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:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

您也可以使用setStyle()方法和<mx:Style>标签指定样式。如下所示：

 程序代码

<mx:Style>
  AdvancedDataGrid {
    defaultLeafIcon:ClassReference(null);
    folderOpenIcon:Embed(source=’assets/folderOpenIcon.jpg’);
    folderClosedIcon:Embed(source=’assets/folderClosedIcon.jpg’);
  }
</mx:Style>

为导航树创建单独的列
在“分层和分组数据显示”章节的示例中，第一列同时显示数据的Region字段值。因此，当年展开导航树节点时，每个树节点标签与对应数据行中的Region字段值一致。对于树的叶子节点，数据源没有包含Region字段值。所有叶子节点标签为空。
您可以将导航树独自放置在单独的列中，该列不和任意数据字段对应。如下所示：

该示例没有任何数据字段与将包含数列对应，所有树图标显示为无标签。该示例同时设置folderClosedIcon、folderOpenIcon、和defaultLeafIcon属性为null，但是disclosure图标被显示以使得用户可以打开或关闭树节点。
以下代码实现该示例：

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            include "SimpleHierarchicalData.as";
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid width=”100%” height=”100%”
        folderClosedIcon=”{null}”
        folderOpenIcon=”{null}”
        defaultLeafIcon=”{null}”>
        <mx:dataProvider>
            <mx:HierarchicalData source=”{dpHierarchy}”/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText=”" width=”50″/>
            <mx:AdvancedDataGridColumn dataField=”Region”/>
            <mx:AdvancedDataGridColumn dataField=”Territory_Rep”
                headerText=”Territory Rep”/>
            <mx:AdvancedDataGridColumn dataField=”Actual”/>
            <mx:AdvancedDataGridColumn dataField=”Estimate”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

显示分层数据
分层数据是数据被分层组织的结构化数据。要在AdvancedDataGrid控件中显示分层数据，您需要将控件的数据源设置为HierarchicalData类的实例。数据源中的数据结构定义了AdvancedDataGrid控件对数据的如何显示。
使用ArrayCollection定义分层数据
正如下面示例中SimpleHierarchicalData.as文件显示的，使用ArrayCollection是创建分层数据的常用方式。在该示例中，数据有三个层次，一个跟层次和两个子层次：

 程序代码

Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", children: [
        {Region:"Arizona", children: [
            {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
            {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
        {Region:”Central California”, children: [
            {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
        {Region:”Nevada”, children: [
            {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
        {Region:”Northern California”, children: [
            {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
            {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
        {Region:”Southern California”, children: [
            {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
            {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
    ]}
]);

该示例在ArrayCollection定义中使用children关键字来定义数据的层次。children关键字是HierarchicalData类用来定义层次的缺省关键字。
您也可以使用使用其他的关键字来定义层次。以下示例显示HierarchicalDataCategories.as文件内容，其使用的是categories关键字：

 程序代码

[Bindable]
private var dpHierarchy:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", categories: [
        {Region:"Arizona", categories: [
            {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
            {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
        {Region:”Central California”, categories: [
            {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
        {Region:”Nevada”, categories: [
            {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
        {Region:”Northern California”, categories: [
            {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
            {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
        {Region:”Southern California”, categories: [
            {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
            {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
    ]}
]);

如下所示，使用HierarchicalData.childrenField属性来指定定义层级的字段名：

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            include "HierarchicalDataCategories.as";
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid width=”100%” height=”100%”>
        <mx:dataProvider>
            <mx:HierarchicalData source=”{dpHierarchy}”
                childrenField=”categories”/>
        </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:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行实例
显示分层XML数据
前面章节的示例中使用ArrayCollection来创建AdvancedDataGrid控件。您也可以使用分层XML数据来创建 AdvancedDataGrid控件。以下示例修改前面章节的数据格式化为XML，然后将数据传递给AdvancedDataGrid控件：

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.HierarchicalData;
            import mx.collections.XMLListCollection;
        ]]>
    </mx:Script>
    <mx:XMLList id=”dpHierarchyXML” >
        <Region Region=”Southwest”>
            <Region Region=”Arizona”>
                <Territory_Rep Territory_Rep=”Barbara Jennings”
                    Actual=”38865″ Estimate=”40000″/>
                <Territory_Rep Territory_Rep=”Dana Binn”
                    Actual=”29885″ Estimate=”30000″/>
            </Region>
            <Region Region=”Central California”>
                <Territory_Rep Territory_Rep=”Joe Smith”
                    Actual=”29134″ Estimate=”30000″/>
            </Region>
            <Region Region=”Nevada”>
                <Territory_Rep Territory_Rep=”Bethany Pittman”
                    Actual=”52888″ Estimate=”45000″/>
            </Region>
            <Region Region=”Northern California”>
                <Territory_Rep Territory_Rep=”Lauren Ipsum”
                    Actual=”38805″ Estimate=”40000″/>
                <Territory_Rep Territory_Rep=”T.R. Smith”
                    Actual=”55498″ Estimate=”40000″/>
            </Region>
            <Region Region=”Southern California”>
                <Territory_Rep Territory_Rep=”Alice Treu”
                    Actual=”44985″ Estimate=”45000″/>
                <Territory_Rep Territory_Rep=”Jane Grove”
                    Actual=”44913″ Estimate=”45000″/>
            </Region>
        </Region>
    </mx:XMLList>
    <mx:AdvancedDataGrid width=”100%” height=”100%”
        dataProvider=”{new HierarchicalData(dpHierarchyXML)}”>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”@Region”
                headerText=”Region”/>
            <mx:AdvancedDataGridColumn dataField=”@Territory_Rep”
                headerText=”Territory Rep”/>
            <mx:AdvancedDataGridColumn dataField=”@Actual”
                headerText=”Actual”/>
            <mx:AdvancedDataGridColumn dataField=”@Estimate”
                headerText=”Estimate”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行实例
显示分组数据
分组数据是组织为同一层次以在AdvancedDataGrid控件中显示的扁平数据。要分组您的数据，您要指定一个更多的字段来将数据归集为同一层次下。
要使用分组数据来生成AdvancedDataGrid控件，您需要从您的扁平数据中创建一个GroupingCollection类的实例，然后将该 GroupingCollection实例作为数据源传递给AdvancedDataGrid控件。当年从扁平数据创建一个 GroupingCollection类的实例时，您需要指定数据中的那些字段用于创建层次。
本节中大部份示例使用如下扁平数据来创建GroupingCollection类的实例：

 程序代码

[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
    {Region:"Southwest", Territory:"Arizona",
        Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
    {Region:"Southwest", Territory:"Arizona",
        Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},
    {Region:"Southwest", Territory:"Central California",
        Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},
    {Region:"Southwest", Territory:"Nevada",
        Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},
    {Region:"Southwest", Territory:"Northern California",
        Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
    {Region:"Southwest", Territory:"Northern California",
        Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},
    {Region:"Southwest", Territory:"Southern California",
        Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
    {Region:"Southwest", Territory:"Southern California",
        Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
]);

以下示例使用该数据:

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            include "SimpleFlatData.as"
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id=”myADG”
        width=”100%” height=”100%”
        initialize=”gc.refresh();”>
        <mx:dataProvider>
            <mx:GroupingCollection id=”gc” source=”{dpFlat}”>
                <mx:grouping>
                    <mx:Grouping>
                    <mx:GroupingField name=”Region”/>
                    <mx:GroupingField name=”Territory”/>
                    </mx:Grouping>
                </mx:grouping>
            </mx:GroupingCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”Region”/>
            <mx:AdvancedDataGridColumn dataField=”Territory”/>
            <mx:AdvancedDataGridColumn dataField=”Territory_Rep”
                headerText=”Territory Rep”/>
            <mx:AdvancedDataGridColumn dataField=”Actual”/>
            <mx:AdvancedDataGridColumn dataField=”Estimate”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行示例
上面的示例中使用俩个字段来分组数据：Region和Territory。
GroupingCollection实例实际上基于这些字段重新格式化数据以作为GroupingCollection实例的内部数据表示，如下所示：

 程序代码

[{GroupLabel:"Southwest", children:[
    {GroupLabel:"Arizona", children:[
        {Region:"Southwest", Territory:"Arizona",
            Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
        {Region:"Southwest", Territory:"Arizona",
            Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]}
    {GroupLabel:”Central California”, children:[
        {Region:"Southwest", Territory:"Central California",
            Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]}
    {GroupLabel:”Nevada”, children:[
        {Region:"Southwest", Territory:"Nevada",
            Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]}
    {GroupLabel:”Northern California”, children:[
        {Region:"Southwest", Territory:"Northern California",
            Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
        {Region:"Southwest", Territory:"Northern California",
            Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]}
    {GroupLabel:”Southern California”, children:[
        {Region:"Southwest", Territory:"Southern California",
            Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
        {Region:"Southwest", Territory:"Southern California",
            Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
]}]

注意该表示的为基于扁平数据的Region和Territory字段的数据分层结构，该GroupingCollection实例同样包含输入的扁平数据的原始行，但是这些行被基于分组字段组织为分层结构。缺省的被用来从扁平数据创建层次结构的数据字段名是GroupLabel。您可以使用Grouping.label属性来指定不同的名字。
AdvancedDataGrid控件使用GroupLabel字段定义导航树分支节点的标签。AdvancedDataGrid控件的第一列同样与Region字段相对应。所以导航树使用Region字段来定义树叶子节点的标签。
grouping属性是GroupingCollection类的缺省MXML属性，所以您可以如下重写前面的示例：

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            include "SimpleFlatData.as"
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id=”myADG”
        width=”100%” height=”100%”
        initialize=”gc.refresh();”>
        <mx:dataProvider>
            <mx:GroupingCollection id=”gc” source=”{dpFlat}”>
                <mx:grouping>
                    <mx:GroupingField name=”Region”/>
                    <mx:GroupingField name=”Territory”/>
                </mx:grouping>
            </mx:GroupingCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”Region”/>
            <mx:AdvancedDataGridColumn dataField=”Territory”/>
            <mx:AdvancedDataGridColumn dataField=”Territory_Rep”
                headerText=”Territory Rep”/>
            <mx:AdvancedDataGridColumn dataField=”Actual”/>
            <mx:AdvancedDataGridColumn dataField=”Estimate”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

调用GroupingCollection.refresh()方法
GroupingCollection.refresh() 方法将GroupingCollection类的设置应用到数据中。您必须在任何时候您通过设置GroupingCollection类的 grouping、 source或summaries属性修改了GroupingCollection类时调用该方法。
为GroupLabel字段创建列
显示分组数据时可选地可以为分组字段生成的顶层条目创建一个单独列。例如，您使用Region和Territory字段来对扁平数据进行分组，这些字段被作为分支节点的标签显示在导航树上，所以您为这些列省去了单独的列，如下所示：
以下代码创建该示例。注意该示例为GroupLabel字段包含了一个AdvancedDataGridColumn实例。对于Region和Territory没有定义列

 程序代码

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            include "SimpleFlatData.as";
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id=”myADG”
        width=”100%” height=”100%”
        defaultLeafIcon=”{null}”
        initialize=”gc.refresh();”>
        <mx:dataProvider>
            <mx:GroupingCollection id=”gc” source=”{dpFlat}”>
                <mx:Grouping>
                    <mx:GroupingField name=”Region”/>
                    <mx:GroupingField name=”Territory”/>
                </mx:Grouping>
            </mx:GroupingCollection>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”GroupLabel”
                headerText=”Region/Territory”/>
            <mx:AdvancedDataGridColumn dataField=”Territory_Rep”
                headerText=”Territory Rep”/>
            <mx:AdvancedDataGridColumn dataField=”Actual”/>
            <mx:AdvancedDataGridColumn dataField=”Estimate”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行实例
在ActionScript中创建分组
前面章节的示例我们使用的是MXML来创建分组，然而，您可能想让用户实时定义分组。以下示例通过事件处理器在ActionScript中创建分组：

 程序代码

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
    <mx:Script>
        <![CDATA[
            import mx.collections.GroupingField;
            import mx.collections.Grouping;
            import mx.collections.GroupingCollection;
            import mx.collections.ArrayCollection;
            include "SimpleFlatData.as";
            [Bindable]
            public var myGColl:GroupingCollection = new GroupingCollection();
            private var myGrp:Grouping = new Grouping();
            private function initDG():void {
                // Initialize the GroupingCollection instance.
                myGColl.source = dpFlat;
                // The Grouping instance defines the grouping fields
                // in the collection, and the order of the groups
                // in the hierarchy.
                myGrp.fields =
                    [new GroupingField("Region"), new GroupingField("Territory")];
                // The grouping property contains a Grouping instance.
                myGColl.grouping = myGrp;
                // Specify the GroupedCollection as the data provider for
                // the AdvancedDataGrid control.
                myADG.dataProvider=myGColl;
                // Refresh the display.
                myGColl.refresh();
            }
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id=”myADG”
        width=”100%” height=”100%”
        creationComplete=”initDG();”>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”Region”/>
            <mx:AdvancedDataGridColumn dataField=”Territory”/>
            <mx:AdvancedDataGridColumn dataField=”Territory_Rep”
                headerText=”Territory Rep”/>
            <mx:AdvancedDataGridColumn dataField=”Actual”/>
            <mx:AdvancedDataGridColumn dataField=”Estimate”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行实例

程序代码

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable]
         private var dpADG:ArrayCollection = new ArrayCollection([
           {Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},
           {Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},
           {Artist:'Saner', Album:'A Child Once', Price:14.99},
           {Artist:'Saner', Album:'Helium Wings', Price:12.99},
           {Artist:'The Doors', Album:'The Doors', Price:10.99},
           {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
           {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
           {Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},
           {Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},
           {Artist:'The Doors', Album:'Strange Days', Price:12.99},
           {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
         ]);                  
      ]]>
    </mx:Script>
    <mx:AdvancedDataGrid width=”100%” height=”100%”
        dataProvider=”{dpADG}”>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”Artist” />
            <mx:AdvancedDataGridColumn dataField=”Album” />
            <mx:AdvancedDataGridColumn dataField=”Price” />
        </mx:columns>
    </mx:AdvancedDataGrid>
</mx:Application>

运行实例
运行以上示例，如下进行排序：
点击AdvancedDataGrid组件的任意列表头对任意列进行排序，例如点击Artist列的列表头Artist列将升序进行排序，再次点击的话将按降序排序。
按住Control键，点击其他任意的列头，例如点击Price列头，将在保持Artist列降序排列的情况下，将Price列按升序排列。现在你可以从中发现某一艺术家最便宜的专辑。
再次点击Price列头，Price列将按降序排列
按住Control键，点击任意其他列，将其加入排序条件中。

自定义行列样式
通过使用AdvancedDataGrid组件的回调(callback)函数来自定义表格行列的样式，要控制某一行的样式，使用AdvancedDataGrid.styleFunction属性，要自定义某一列的样式，使用AdvancedDataGridColumn.styleFunction属性，AdvancedDataGrid.styleFunction指定的回调函数先执行，接着才执行AdvancedDataGridColumn.styleFunction属性指定的函数。
回调函数必须要有如下声明：

程序代码

public function myStyleFunction(data:Object,column:SuperDataGridColumn):Object

该函数返回一个包含用于表示样式设置的styleName:value对的完整对象，或者null。styleName为样式属性的名称，如Color，而value为样式属性的值，如0×00FF00。
AdvancedDataGrid会在更新显示时调用回调函数，如应用启动时该组件第一次会绘制的时候，或者在您调用invalidateList()来刷新组件所有行的显示时。
本节的示例将使用回调函数来定义AdvancedDataGrid的样式，本节中所有的示例都使用以下StyleData.as文件中的数据：

程序代码

[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
   {Artist:'Pavement', Album:'Slanted and Enchanted', Price:12.99},
   {Artist:'Pavement', Album:'Brighten the Corners', Price:13.99},
   {Artist:'Saner', Album:'A Child Once', Price:14.99},
   {Artist:'Saner', Album:'Helium Wings', Price:12.99},
   {Artist:'The Doors', Album:'The Doors', Price:10.99},
   {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
   {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
   {Artist:'Grateful Dead', Album:'In the Dark', Price:17.99},
   {Artist:'Grateful Dead', Album:'Shakedown Street', Price:13.99},
   {Artist:'The Doors', Album:'Strange Days', Price:12.99},
   {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
]);

定义行样式
以下示例使用AdvancedDataGrid.styleFunction属性指定一个回调函数来定义表格行样式。在该示例中，您可以使用Button控件来选择AdvancedDataGrid.styleFunction中的artist，然后回调函数将会红色高亮显示所有被选择的行。

程序代码

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
            // Include the data for the AdvancedDataGrid control.
            include "StyleData.as"
            // Artist name to highlight.
            protected var artistName:String;
            // Event handler to set the selected artist's name
            // based on the selected Button control.
            public function setArtistName(event:Event):void
            {
                artistName=Button(event.currentTarget).label;
                // Refresh row display.
                myADG.invalidateList();
            }
            // Callback function that hightlights in red
            // all rows for the selected artist.
            public function myStyleFunc(data:Object,
                col:AdvancedDataGridColumn):Object
            {
                if (data["Artist"] == artistName)
                return {color:0xFF0000};
                // Return null if the Artist name does not match.
                return null;
            }
        ]]>
    </mx:Script>
    <mx:AdvancedDataGrid id=”myADG”
    width=”100%” height=”100%”
    dataProvider=”{dpADG}”
    styleFunction=”myStyleFunc”>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField=”Artist”/>
            <mx:AdvancedDataGridColumn dataField=”Album”/>
            <mx:AdvancedDataGridColumn dataField=”Price”/>
        </mx:columns>
    </mx:AdvancedDataGrid>
    <mx:HBox>
        <mx:Button label=”Pavement” click=”setArtistName(event);”/>
        <mx:Button label=”Saner” click=”setArtistName(event);”/>
        <mx:Button label=”The Doors” click=”setArtistName(event);”/>
    </mx:HBox>
</mx:Application>