apache-flex - AdvancedDataGrid へのデータプロバイダーとして AsyncListView を使用して、階層データを表示する方法は?

Question

AsyncListView を使用して、リモート処理を使用してデータをフェッチし、それをデータプロバイダーとして AdvancedDataGrid に提供したいと考えています。[ブログ] http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/の PagedList コンポーネントを使用しています。

AdvancedDataGrid にレコードが入力されていません。完全に機能する単純なデータグリッドでテストを行いました。

ここで何が問題になりますか？

コードは次のとおりです。

<?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"
     xmlns:local="*"
     width="400" height="300">

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->

    <local:PagedList id="pagedList" pageSize="100" length="1000"  
                                             loadItemsFunction="loadItems"/>
    <s:AsyncListView id="asyncListView" list="{pagedList}" 
                          createPendingItemFunction="handleCreatePendingItemFunction"/>
    <s:RemoteObject id="ro" destination="helloService" 
                       endpoint="http://localhost:8080/SpringRemoting/messagebroker
                                 /amf"/>

</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.collections.Grouping;
        import mx.collections.GroupingCollection;
        import mx.collections.GroupingField;
        import mx.collections.IList;
        import mx.collections.errors.ItemPendingError;
        import mx.controls.Alert;
        import mx.controls.List;
        import mx.events.FlexEvent;
        import mx.rpc.AsyncResponder;
        import mx.rpc.AsyncToken;
        import mx.rpc.events.FaultEvent;
        import mx.rpc.events.ResultEvent;
        import mx.utils.ObjectUtil;


        private function handleCreatePendingItemFunction(index:int, ipe:ItemPendingError):Object {
            mx.controls.Alert.show("handleCreatePendingItemFunction index = " + index + " : " + ipe.message); 
            return {};
        }

        public function loadItems(list:IList, start:uint, count:uint):void
        {
            mx.controls.Alert.show("loadItems lenght : start = " + list.length + " : " + start);
            var asyncToken:AsyncToken = ro.getRecordsFromDB(start, count);
            asyncToken.addResponder(new AsyncResponder(onResult, onFault, start));

        }

        private function onResult(event:ResultEvent, token:Object):void {
            //1. Fetch data from database

            var items:Vector.<Object> = new Vector.<Object>();
            for each (var item:Object in event.result ) {
                items.push(item);
            }

            //2. Update pagedList
            pagedList.storeItemsAt(items, token as int);

            //3. Update GroupingCollection's source 
            asyncListView.list = pagedList;
            gc.source = asyncListView.list;
            gc.refresh();
            adg1.validateNow();
        }

        private function onFault(event:FaultEvent, token:Object):void {
            mx.controls.Alert.show("fault : " + event.fault.message);
        }

    ]]>
</fx:Script>


<mx:AdvancedDataGrid id = "adg1" 
                     initialize="gc.refresh();"
                     sortExpertMode="true"
                     defaultLeafIcon="{null}" 
                     folderClosedIcon="{null}"
                     folderOpenIcon="{null}"
                     height="200"
                     width="500"
                     displayItemsExpanded="false"
                     x="10">
    <mx:dataProvider>
        <mx:GroupingCollection2 id="gc" 
                                childrenField="col1"
                                >
            <mx:grouping>
                <mx:Grouping label="GroupLabel1">
                    <mx:GroupingField  name="col1"> </mx:GroupingField>
                    <mx:GroupingField  name="col2"> </mx:GroupingField>
                    <mx:GroupingField  name="col3"> </mx:GroupingField>
                    <mx:GroupingField  name="col4"> </mx:GroupingField>
                </mx:Grouping>  
            </mx:grouping>
        </mx:GroupingCollection2>
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="GroupLabel1" headerText="col1" />
        <mx:AdvancedDataGridColumn dataField="col2" />
        <mx:AdvancedDataGridColumn dataField="col3" />
        <mx:AdvancedDataGridColumn dataField="col4" />
        <mx:AdvancedDataGridColumn dataField="col5" />
    </mx:columns>
</mx:AdvancedDataGrid>


<mx:DataGrid dataProvider="{asyncListView}" x="10" y="300">
    <mx:columns>
        <mx:DataGridColumn dataField="col1"/>
        <mx:DataGridColumn dataField="col2"/>
        <mx:DataGridColumn dataField="col3"/>
        <mx:DataGridColumn dataField="col4"/>
        <mx:DataGridColumn dataField="col5"/>
        <mx:DataGridColumn dataField="col6"/>
    </mx:columns>
</mx:DataGrid>