Flex中实现多表头显示的功能

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Array id="planets">
<mx:Object planet="Mercury" kind="Terrestrial" year_duration="0.24" moons="0" cost="1250" />
<mx:Object planet="Venus" kind="Terrestrial" year_duration="0.62" moons="0" cost="2400" />
<mx:Object planet="Jupiter" kind="Gas giant" year_duration="11.86" moons="63" cost="500" />
<mx:Object planet="Neptune" kind="Gas giant" year_duration="164.8" moons="13" cost="3000" />
<mx:Object planet="Ceres" kind="Ice dwarf" year_duration="4.60" moons="0" cost="4000" />
<mx:Object planet="Pluto" kind="Ice dwarf" year_duration="248.09" moons="3" cost="4500" />
<mx:Object planet="Eris" kind="Ice dwarf" year_duration="557" moons="1" cost="3000" />
</mx:Array>
<mx:AdvancedDataGrid id="adg" dataProvider="{planets}" width="450" variableRowHeight="true" wordWrap="true">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="planet" headerText="Planet" />
<mx:AdvancedDataGridColumnGroup id="details" headerText="Details" textAlign="center">
<mx:AdvancedDataGridColumn dataField="kind" headerText="Kind" />
<mx:AdvancedDataGridColumn dataField="year_duration" headerText="Year" />
<mx:AdvancedDataGridColumn dataField="moons" headerText="Moons" />
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumn dataField="cost" headerText="Cost" />
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script>
<!--[CDATA[
import mx.events.ResizeEvent;
import mx.controls.Label;
private const leftText:String = "Left";
private const rightText:String = "Right";
private var leftLabel:Label;
private var rightLabel:Label;
private function init():void{
addLabel();
drawLine();
this.addEventListener(ResizeEvent.RESIZE, onResize);
}
private function onResize(e:ResizeEvent):void{
resetLabel();
drawLine();
}
private function drawLine():void{
var g:Graphics = this.graphics;
g.clear();
g.lineStyle(0.5, 0xB7BABC);
g.moveTo(0, 0);
g.lineTo(this.width, this.height);
}

private function addLabel():void{
leftLabel = new Label();
leftLabel.text = leftText;
addChild(leftLabel);
rightLabel = new Label();
rightLabel.text = rightText;
addChild(rightLabel);
callLater(resetLabel);
}

private function resetLabel():void{

leftLabel.x = 5;
leftLabel.y = this.height - leftLabel.height - 5;
rightLabel.x = this.width - rightLabel.width;
rightLabel.y = 10;
}
]]-->
</mx:Script>
</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Array id="planets">
<mx:Object planet="Mercury" kind="Terrestrial" year_duration="0.24" moons="0" cost="1250" />
<mx:Object planet="Venus" kind="Terrestrial" year_duration="0.62" moons="0" cost="2400" />
<mx:Object planet="Jupiter" kind="Gas giant" year_duration="11.86" moons="63" cost="500" />
<mx:Object planet="Neptune" kind="Gas giant" year_duration="164.8" moons="13" cost="3000" />
<mx:Object planet="Ceres" kind="Ice dwarf" year_duration="4.60" moons="0" cost="4000" />
<mx:Object planet="Pluto" kind="Ice dwarf" year_duration="248.09" moons="3" cost="4500" />
<mx:Object planet="Eris" kind="Ice dwarf" year_duration="557" moons="1" cost="3000" />
</mx:Array>
<mx:AdvancedDataGrid id="adg" dataProvider="{planets}" width="450" height="300" variableRowHeight="true" wordWrap="true">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn dataField="planet" headerText="Planet" headerWordWrap="true" headerRenderer="GridHeadRenderer"/>
<mx:AdvancedDataGridColumnGroup id="details" headerText="Details" textAlign="center">
<mx:AdvancedDataGridColumn dataField="kind" headerText="Kind" />
<mx:AdvancedDataGridColumn dataField="year_duration" headerText="Year" />
<mx:AdvancedDataGridColumn dataField="moons" headerText="Moons" />
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumn dataField="cost" headerText="Cost" />
</mx:groupedColumns>
</mx:AdvancedDataGrid>

</mx:Application>