ComboBox / DataGrid Sorter

I'm trying to update a combobox/datagrid sorter that came from flex3 to a flex4 version but I keep getting an error that my newbie brain is not processing. The error is "1067: Implicit coercion of a value of type Array to an unrelated type mx.collections:IList." Please help

Here is my code:

<?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"
    creationComplete="fnCreationComplete(event)"
    >
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.collections.Sort;
            import mx.collections.SortField;
            import mx.events.FlexEvent;         
            import spark.events.DropDownEvent;

            [Bindable]
            private var arrColl:ArrayCollection;

            [Bindable]
            private var arr:Array = [ "time", "teamA", "teamB", "status" ];

            private var SelectedFilter:String;

            protected function fnCreationComplete(event:FlexEvent):void
            {
                arrColl = new ArrayCollection();
                arrColl.addItem( { time:开发者_JAVA技巧 "30:45", teamA: "Ab", teamB: "B", status: "3'" } );
                arrColl.addItem( { time: "20:45", teamA: "Ac", teamB: "C", status: "2'" } );
                arrColl.addItem( { time: "19:45", teamA: "Ad", teamB: "B", status: "1'" } );
            }

            private function fnComboxClosed(e:DropDownEvent):void
            {
                var tempCol:DataGridColumn = this[ comboBox.selectedItem ] as DataGridColumn;
                tempCol.sortDescending = false;
            }

            private function onComboChange( e:Event ) :void
            {
                SelectedFilter = e.currentTarget.selectedItem;
                var sort:Sort = new Sort();
                sort.fields = [ new SortField( SelectedFilter, true ) ];
                arrColl.sort = sort;
                arrColl.refresh();
            }

        ]]>
    </fx:Script>

    <mx:DataGrid id="dg" dataProvider="{arrColl}" 
                 rowCount="7" horizontalCenter="0" top="10">
        <mx:columns>
            <mx:DataGridColumn id="time" headerText="Time" dataField="time"/>
            <mx:DataGridColumn id="teamA" headerText="Team A" dataField="teamA"/>
            <mx:DataGridColumn id="teamB" headerText="Team B" dataField="teamB"/>
            <mx:DataGridColumn id="status" headerText="Status" dataField="status"/>
        </mx:columns>       
    </mx:DataGrid>

    <s:ComboBox id="comboBox"
                dataProvider="{arr}"
                close="fnComboxClosed(event)"
                change="onComboChange(event)" horizontalCenter="0" top="209"/>

</s:Application>

In Flex 4, it seems only MX components can have raw data objects as their data providers. Spark components require actual collections.

This from Adobe's docs on data providers in Flex 4:

For Spark controls, you cannot use a raw object as the value of the control’s data provider. You must specify an object that implements the IList interface. Classes that implement IList include ArrayCollection, ArrayList, and XMLListCollection

I wrapped your arr in an ArrayCollection, and everything compiled:

[Bindable]
private var arr:ArrayCollection = new ArrayCollection([ "time", "teamA", "teamB", "status" ]);