Flex 4 - Advanced Datagrid

Sample.mxml

<?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" 
               skinClass="TDFGradientBackgroundSkin" 
               viewSourceURL="srcview/index.html">
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]private var dpFlat:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                {Region:"Southwest", Territory:"Central California", 
                    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                {Region:"Southwest", Territory:"Nevada", 
                    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000},
                {Region:"NorthEast", Territory:"New York", 
                    Territory_Rep:"Jose Rodriguez", Actual:26992, Estimate:30000}, 
                {Region:"NorthEast", Territory:"New York", 
                    Territory_Rep:"lisa Sims", Actual:47885, Estimate:50000},  
                {Region:"NorthEast", Territory:"Massachusetts", 
                    Territory_Rep:"kelly o'connell", Actual:172911, Estimate:20000}, 
                {Region:"NorthEast", Territory:"Pennsylvania", 
                    Territory_Rep:"John Barnes", Actual:32105, Estimate:30000},
                {Region:"MidWest", Territory:"Illinois", 
                    Territory_Rep:"Seth Brown", Actual:42511, Estimate:40000}
            ]);
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
    </s:layout>
    
    <s:Panel title="AdvancedDataGrid Control" 
             color="0x000000" 
             borderAlpha="0.15" 
             width="600">
        
        <mx:AdvancedDataGrid id="myADG" 
                             width="100%" height="100%" 
                             color="0x323232"
                             dataProvider="{dpFlat}">
            
            <mx:groupedColumns>
                
                <mx:AdvancedDataGridColumn dataField="Region" />
                <mx:AdvancedDataGridColumn dataField="Territory" />
                <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                           headerText="Territory Rep"/>
                <mx:AdvancedDataGridColumnGroup headerText="Revenues">    
                    <mx:AdvancedDataGridColumn dataField="Actual"/>
                    <mx:AdvancedDataGridColumn dataField="Estimate"/>
                </mx:AdvancedDataGridColumnGroup>    

            </mx:groupedColumns>
            
        </mx:AdvancedDataGrid>
        
    </s:Panel>
    
</s:Application>

TDFPanelSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:mx="library://ns.adobe.com/flex/mx" 
             xmlns:s="library://ns.adobe.com/flex/spark">
    
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
    
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    
    <s:Rect id="bg" width="100%" height="100%">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:entries>
                    <s:GradientEntry color="0x000000" ratio="0.00" />
                    <s:GradientEntry color="0x323232" ratio="1.0" />
                </s:entries>
            </s:LinearGradient>    
        </s:fill>
    </s:Rect>
    
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" />
</s:SparkSkin>