flex:how to sort GridColumn

Question

I would like to sort my gridcolumn.Here's my sortCompareFunction code:

protected function sortCompareFunction(obj1:Object, obj2:Object, gc:GridColumn):int
        {
            collator.ignoreCase=true;
            return collator.compare(obj1[gc.dataField], obj2[gc.dataField]);
        }

and the datagrid:

<s:DataGrid id="dataGrid" width="100%" height="100%" borderColor="#CCCCCC" borderVisible="true"
            chromeColor="#CCCCCC" color="#000000" contentBackgroundColor="#8C90BB"
            selectionColor="#D0E4E9" symbolColor="#FFFFFF" sortableColumns="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn width="150" dataField="title" headerText="Progetto"
                          sortCompareFunction="sortCompareFunction"></s:GridColumn>
            <s:GridColumn dataField="author" headerText="Stato" width="50"></s:GridColumn>
            <s:GridColumn dataField="newsdate" headerText="Scadenza"></s:GridColumn>
        </s:ArrayList>
    </s:columns>
    <s:AsyncListView list="{FlexGlobals.topLevelApplication.PMProjs.lastResult}"/>
</s:DataGrid>

It doesn't work. I don't see the arrow in the column header and anything is sorted. Thanks in advance for any help!

Ok, solved by substituting the AsyncListView with an Arraycollection:

<s:DataGrid id="dataGrid" width="100%" height="100%" borderColor="#CCCCCC" borderVisible="true"
            chromeColor="#CCCCCC" color="#000000" contentBackgroundColor="#8C90BB"
            selectionColor="#D0E4E9" symbolColor="#FFFFFF">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn width="150" dataField="title" headerText="Progetto" 
                          showDataTips="title"></s:GridColumn>
            <s:GridColumn dataField="author" headerText="Stato" width="50"></s:GridColumn>
            <s:GridColumn dataField="newsdate" headerText="Scadenza"></s:GridColumn>
        </s:ArrayList>
    </s:columns>
    <s:ArrayCollection list="{FlexGlobals.topLevelApplication.PMProjs.lastResult}"/>

without sortCompareFunction.

Answer 1

protected function sortTtl_changeHandler(event:IndexChangeEvent):void
        {
            switch(event.newIndex)
            {
                case 0:
                {
                    var sort:Sort = new Sort();
                    sort.fields = [new SortField("title", true)];
                    dataGrid.sort = sort;
                    dataGrid.refresh();
                    break;
                }
                case 1:
                {
                    var sort:Sort = new Sort();
                    sort.fields = [new SortField("author", true)];
                    dataGrid.sort = sort;
                    dataGrid.refresh();
                    break;
                }
                case 2:
                {
                    var sort:Sort = new Sort();
                    sort.fields = [new SortField("newsdate", true)];
                    dataGrid.sort = sort;
                    dataGrid.refresh();
                    break;
                }

                default:
                {
                    break;
                }
            }

        }
    <s:DropDownList id="sortTtl" visible="false" width="128"
                                change="sortTtl_changeHandler(event)" dataProvider="{sortData}"
                                labelField="label"/>    

Answer 2

Yes. As suggested by RIAstar, changing AsyncListView to ArrayCollection will do the trick. Note that asynclist is data structure that is generated by Flex.

Also note that the Arraylist defined inside the columns tag of the DataGrid does NOT have to be changed to Arraycollection. Interesting.