Flex Collapsible DataGrid

Flex 3 AdvancedDataGrid 具有 Tree 與 跨欄 (columnSpan) 的功能
以下利用這兩種特性做出可收合的 DataGrid

MyDataGridGroupItemRenderer Class：

package com.ticore.uicomponents {
 import mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer;

 public class MyDataGridGroupItemRenderer extends AdvancedDataGridGroupItemRenderer {
   
  public function MyDataGridGroupItemRenderer() {
   super();
  }
  override protected function updateDisplayList(
     unscaledWidth:Number, unscaledHeight:Number):void {
   
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   
   this.graphics.clear();
   this.graphics.lineStyle(1, 0x808080, 1, true);
   this.graphics.drawRect(-1, -1, unscaledWidth + 1, unscaledHeight);
  }
  
 }
}

 

 Flex MXML Code：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#E0E0E0">
 <mx:Script>
  <![CDATA[
   import mx.controls.advancedDataGridClasses.*;
   import mx.collections.ArrayCollection;
            
   [Bindable]
   private var dpHierarchy:ArrayCollection = new ArrayCollection([
    {Region:"Arizona", children: [
     {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
     {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
    {Region:"Central California", children: [
     {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
    {Region:"Nevada", children: [
     {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
    {Region:"Northern California", children: [
     {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
     {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
    {Region:"Southern California", children: [
     {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
     {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
    ]);
   
   public function groupLabelFunction(item:Object, column:AdvancedDataGridColumn):String{
    if (item && item.children) {
     return item[column.dataField] + " (" + item.children.length + ")";
    } else {
     return item[column.dataField];
    }
   }
  ]]>
 </mx:Script>

 <mx:AdvancedDataGrid id="myADG" width="100%" height="100%"
    rowHeight="24" headerHeight="24" fontSize="12" displayItemsExpanded="true"
    paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0"
    folderClosedIcon="{null}" folderOpenIcon="{null}" defaultLeafIcon="{null}" >
  <mx:dataProvider>
      <mx:HierarchicalData source="{dpHierarchy}" />
  </mx:dataProvider>
  <mx:rendererProviders>
      <mx:AdvancedDataGridRendererProvider columnIndex="0" columnSpan="4" dataField="Region"
     renderer="com.ticore.uicomponents.MyDataGridGroupItemRenderer" />
      <mx:AdvancedDataGridRendererProvider dataField="Territory_Rep"
     renderer="mx.controls.advancedDataGridClasses.AdvancedDataGridGroupItemRenderer" />
     </mx:rendererProviders>
  <mx:groupedColumns>
   <mx:AdvancedDataGridColumn id="col1" dataField="Region" width="20"
      labelFunction="groupLabelFunction" />
   <mx:AdvancedDataGridColumn id="col2" dataField="Territory_Rep"/>
   <mx:AdvancedDataGridColumn dataField="Actual"/>
   <mx:AdvancedDataGridColumn dataField="Estimate"/>
  </mx:groupedColumns>
 </mx:AdvancedDataGrid>
</mx:Application>