组件使用_AdvancedDataGrid_1

本次记录的是Flex3,AdvancedDataGrid的使用方式,以code进行说明为主
1.mxml方式
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection; 
<!--0-->
            [Bindable] private var dp:ArrayCollection = new ArrayCollection([
              {name:"one",key:'key',data:'数据1'},
              {name:"one",key:'key',data:'数据2'},
              {name:"one",key:'key',data:'数据3'},
              {name:"two",key:'key',data:'数据_1'},
              {name:"two",key:'key',data:'数据_2'},
              {name:"two",key:'key',data:'数据_3'}
            ]);
        ]]>
    </mx:Script>
    <mx:Panel title="AdvancedDataGrid Control Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<!--1-->
        <mx:AdvancedDataGrid id="myADG"
            width="100%" height="100%"
            initialize="gc.refresh()">
<!--2-->
            <mx:dataProvider>
                <mx:GroupingCollection id="gc" source="{dp}">
                    <mx:grouping>
                        <mx:Grouping>
      <!--2.1-->
                            <mx:GroupingField name="name"/>
                        </mx:Grouping>
                    </mx:grouping>
                </mx:GroupingCollection>
            </mx:dataProvider>  
<!--3-->
            <mx:columns>
                <mx:AdvancedDataGridColumn dataField="key"/>
                <mx:AdvancedDataGridColumn dataField="data"/>
            </mx:columns>
       </mx:AdvancedDataGrid>
    </mx:Panel>
</mx:Application>
运行以上code,可以看到效果,下面进行说明:
0: 定义一个可绑定的数据源
1: 定义AdvancedDataGrid,并设置好参数,最关键的是 initialize="gc.refresh()" ,就是组件初始化时刷新,否则AdvancedDataGrid是没数据显示的
2: 定义AdvancedDataGrid的数据源
  2.1: 定义分组字段,(让AdvancedDataGrid以此字段进行分组显示),从数据源dp可见,这次的显示效果应该如此:
   one|
    key 数据1
    key 数据2
    key 数据3
   two|
    key 数据_1
    key 数据_2
    key 数据_3
 one,two对于的是name字段,所以分组字段是name,即<mx:GroupingField name="name"/>
3: 定义好AdvancedDataGrid的数据字段,更DataGrid是一致的!
ps:AdvancedDataGrid可以显示一些高级的功能如分组显示...可以看出来,数据源需要稍微组织一下,AdvancedDataGrid会以文本数据相同的指定列<!--2.1-->进行分组!