Flex 3 已经开始公测,其带来了诸多变化,所以由今天开始,我们将陆续和大家一起来学习其中的新特性,进行我们的Flex 3发现之旅。

今天我们要说的是官方文档中用了整章介绍的AdvancedDataGrid,AdvancedDataGrid是DataGrid的高级版本,Flex 3 SDK并不包含它,其和Charting Enhancements一起构成了Flex Data Visualization package,TNND,也就是说这是收费组件,ADOBE的生财机器。所以官方提供的SDK中并没有这个组件,不过FlexBuilder 3 Beta1内置的SDK包含了Flex Data Visualization package,这个我已经将FlexBuilder 3 Beta1内置的SDK剥离出来了,需要的朋友可以从这里下载。

相对DataGrid组件,AdvancedDataGrid主要有以下几个高级之处:

  • 多列排序:按住Control键在点击某一列的表头来实现多列排序。
  • 自定义行和列样式:通过设置行和列的styleFunction指向一个函数来样式化行列
  • 显示分层数据:在组件的第一列显示一个可缩放的导航数来控制表格行的显示。
  • 创建多列分组:将多列汇聚到同一列表头下。
  • 使用单元渲染器(renderers):跨越多栏使用同一渲染器或者一列使用多个渲染器。

多列排序

缺省的情况下,AdvancedDataGrid是按数据添加到它的DataProvider的顺序显示数据,和DataGrid组件一样,AdvancedDataGrid也允许您在数据显示后对数据进行排序。不同的是DataGrid只能基于单列排序,而AdvancedDataGrid支持基于多列的排序。

以下是多列排序的示例:

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