Flex 之AdvanceDatagrid(一)_标题分组显示

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
? ? ?xmlns:s="library://ns.adobe.com/flex/spark"?
? ???xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
//定义一个源数组
private var dpFlat:ArrayCollection = new ArrayCollection(
[{name:"苹果",count:"100",sprice:10,yprice:8},
{name:"桔子",count:"200",sprice:11,yprice:10},
{name:"黄梨",count:"300",sprice:6,yprice:4},
{name:"香蕉",count:"400",sprice:9,
{name:"桃子",count:"500",sprice:5,yprice:3},
{name:"杏子",count:"600",sprice:8,yprice:6}]);
]]>
</fx:Script>
<!--Flex4与Flex3 定义布局的不同-->
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Panel title="水果价格一览表"?color="0x000000" ?borderAlpha="0.15"?width="600" >
<!--定义AdvanceDataGrid组件并且设置相关属性和数据源-->
<mx:AdvancedDataGrid id="myADG" ? headerColors="[0xaaaaaa,0xcccccc]" ??width="100%" height="100%"?color="0X323232"?dataProvider="{dpFlat}" >
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="name" headerText="水果名字"/>
<mx:AdvancedDataGridColumn dataField="count" headerText="数量" />
<mx:AdvancedDataGridColumnGroup headerText="价格对比">
<mx:AdvancedDataGridColumn dataField="sprice" headerText="市场价"/>
<mx:AdvancedDataGridColumn dataField="yprice" headerText="优惠价格"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</s:Panel>
</s:Application>