组件使用_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-->进行分组!