Flex Examples » SortField http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Displaying all the properties of a component instance in Flex http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/#comments Wed, 06 Aug 2008 05:38:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ The following example shows you how you can display all the getters/setters and their current values for a Flex TextArea control by using the describeType() method, some E4X filtering, and an XMLListCollection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> [...]]]> The following example shows you how you can display all the getters/setters and their current values for a Flex TextArea control by using the describeType() method, some E4X filtering, and an XMLListCollection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        private var xmlDebug:XML;

        private function init():void {
            xmlDebug = describeType(targetObj);
            xmlListColl.source = xmlDebug.accessor.(@declaredBy == xmlDebug.@name);
        }

        private function labelFunc(item:Object, col:DataGridColumn):String {
            var value:Object = targetObj[item.@name];
            if (value == null) {
                return "(null)";
            }
            return value.toString();
        }
    </mx:Script>

    <mx:XMLListCollection id="xmlListColl">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="@name" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:XMLListCollection>

    <mx:VDividedBox width="100%" height="100%">
        <mx:TextArea id="targetObj"
                resize="init();" />

        <mx:DataGrid id="dataGrid"
                dataProvider="{xmlListColl}"
                color="black"
                width="100%"
                height="100%">
            <mx:columns>
                <mx:DataGridColumn dataField="@access"
                        itemRenderer="RedLabel" />
                <mx:DataGridColumn dataField="@name" />
                <mx:DataGridColumn labelFunction="labelFunc"
                        headerText="value" />
            </mx:columns>
        </mx:DataGrid>
    </mx:VDividedBox>

</mx:Application>

RedLabel.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/ -->
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" color="{(data.@access == 'readonly') ? 0xFF0000 : 0x000000}" />

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/08/05/displaying-all-the-properties-of-a-component-instance-in-flex/feed/ 4 Creating a custom sort on a DataGrid control in Flex http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/#comments Thu, 10 Apr 2008 04:12:10 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ The following example shows how you can create a custom sort on a Flex DataGrid control by using the SortField class and creating a custom compare function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.collections.SortField; import mx.collections.Sort; import [...]]]> The following example shows how you can create a custom sort on a Flex DataGrid control by using the SortField class and creating a custom compare function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.SortField;
            import mx.collections.Sort;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.utils.ObjectUtil;

            private function sortOld():void {
                var sortField:SortField = new SortField();
                sortField.compareFunction = test2_compareFunc;
                sortField.descending = checkBox.selected;

                var oldSort:Sort = new Sort();
                oldSort.fields = [sortField];

                xmlListColl.sort = oldSort;
                xmlListColl.refresh();
            }

            private function sortNew():void {
                var sortField:SortField = new SortField();
                sortField.compareFunction = test3_compareFunc;
                sortField.descending = checkBox.selected;

                var sort:Sort = new Sort();
                sort.fields = [sortField];

                xmlListColl.sort = sort;
                xmlListColl.refresh();
            }

            private function resetSort():void {
                xmlListColl.sort = null;
                xmlListColl.refresh();
            }

            private function dataGridCol_labelFunc(item:XML, col:DataGridColumn):String {
                return item.*.(@name == col.dataField).text();
            }

            private function test2_compareFunc(itemA:XML, itemB:XML):int {
                var valueA:String = itemA.test2.text();
                var valueB:String = itemB.test2.text();
                return ObjectUtil.stringCompare(valueA, valueB);
            }

            private function test3_compareFunc(itemA:XML, itemB:XML):int {
                var valueA:String = itemA.test3.text();
                var valueB:String = itemB.test3.text();
                return ObjectUtil.stringCompare(valueA, valueB);
            }
        ]]>
    </mx:Script>

    <mx:XML id="tests" source="tests.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{tests.test}" />

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox" label="descending:" labelPlacement="left" />

        <mx:Button label="Sort 'old'"
                click="sortOld();" />

        <mx:Button label="Sort 'new'"
                click="sortNew();" />

        <mx:Button label="Reset sort"
                click="resetSort();" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{xmlListColl}"
            width="300"
            verticalScrollPolicy="on"
            sortableColumns="true">
        <mx:columns>
            <mx:DataGridColumn dataField="old"
                    labelFunction="dataGridCol_labelFunc"
                    sortCompareFunction="test2_compareFunc" />
            <mx:DataGridColumn dataField="new"
                    labelFunction="dataGridCol_labelFunc"
                    sortCompareFunction="test3_compareFunc"  />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

tests.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/ -->
<tests>
    <test name="group1">
        <test2 name="old">One (old)</test2>
        <test3 name="new">Un (new)</test3>
    </test>
    <test name="group2">
        <test2 name="old">Two (old)</test2>
        <test3 name="new">Deux (new)</test3>
    </test>

    <test name="group8">
        <test2 name="old">Eight (old)</test2>
        <test3 name="new">Huit (new)</test3>
    </test>
</tests>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/09/creating-a-custom-sort-on-a-datagrid-control-in-flex/feed/ 6 Displaying the sort arrow in a Flex DataGrid control without having to click a column http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/ http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/#comments Fri, 29 Feb 2008 01:38:07 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/ I’ve seen this question come up a few times recently in various forums/lists and even in my blog comments (see “Changing the default sort arrow skin on a Flex DataGrid control”).

The following example shows how you can display the sort arrow in a DataGrid control in Flex without having the user click on [...]]]> I’ve seen this question come up a few times recently in various forums/lists and even in my blog comments (see “Changing the default sort arrow skin on a Flex DataGrid control”).

The following example shows how you can display the sort arrow in a DataGrid control in Flex without having the user click on a column header in the DataGrid control.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/ -->
<mx:Application name="DataGrid_dataProvider_sort_fields_test">
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.Sort;
            import mx.collections.SortField;
 
            private function init():void {
                arrColl.sort = new Sort();
                arrColl.sort.fields = [new SortField("idx", false, true)];
                arrColl.refresh();
            }
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object idx="1" c1="One.1" c2="One.2" />
                <mx:Object idx="2" c1="Two.1" c2="Two.2" />
                <mx:Object idx="3" c1="Three.1" c2="Three.2" />
                <mx:Object idx="4" c1="Four.1" c2="Four.2" />
                <mx:Object idx="5" c1="Five.1" c2="Five.2" />
                <mx:Object idx="6" c1="Six.1" c2="Six.2" />
                <mx:Object idx="7" c1="Seven.1" c2="Seven.2" />
                <mx:Object idx="8" c1="Eight.1" c2="Eight.2" />
                <mx:Object idx="9" c1="Nine.1" c2="Nine.2" />
                <mx:Object idx="10" c1="Ten.1" c2="Ten.2" />
                <mx:Object idx="11" c1="Eleven.1" c2="Eleven.2" />
                <mx:Object idx="12" c1="Twelve.1" c2="Twelve.2" />
                <mx:Object idx="13" c1="Thirteen.1" c2="Thirteen.2" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            creationComplete="init();">
        <mx:columns>
            <mx:DataGridColumn dataField="idx" />
            <mx:DataGridColumn dataField="c1" />
            <mx:DataGridColumn dataField="c2" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.

A big thanks to Rob for the heads up with the solution!

For more information, see http://bugs.adobe.com/jira/browse/SDK-14663.

 
]]> http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/feed/ 33 Creating a custom label function on a Flex PopUpMenuButton control http://blog.flexexamples.com/2008/02/21/creating-a-custom-label-function-on-a-flex-popupmenubutton-control/ http://blog.flexexamples.com/2008/02/21/creating-a-custom-label-function-on-a-flex-popupmenubutton-control/#comments Fri, 22 Feb 2008 05:42:33 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/21/creating-a-custom-label-function-on-a-flex-popupmenubutton-control/ The following example shows how you can use an XML data provider on a PopUpMenuButton in Flex and create a custom label function using the labelFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/21/creating-a-custom-label-function-on-a-flex-popupmenubutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ private function getTeams(dp:XML, leagueAbbrev:String, divisionLabel:String):XMLList [...]]]> The following example shows how you can use an XML data provider on a PopUpMenuButton in Flex and create a custom label function using the labelFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/21/creating-a-custom-label-function-on-a-flex-popupmenubutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function getTeams(dp:XML, leagueAbbrev:String, divisionLabel:String):XMLList {
                return dp.league.(@abbrev == leagueAbbrev).division.(@label == divisionLabel).team;
            }

            private function popUpMenuButton_labelFunc(item:Object):String {
                return item.@label + " " + item.@name;
            }
        ]]>
    </mx:Script>

    <mx:XML id="mlb" source="mlb.xml" />

    <mx:XMLListCollection id="mlbXLC"
            source="{getTeams(mlb, 'NL', 'West')}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="@label"
                            caseInsensitive="true" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:XMLListCollection>

    <mx:PopUpMenuButton id="popUpMenuButton"
            dataProvider="{mlbXLC}"
            labelFunction="popUpMenuButton_labelFunc" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/21/creating-a-custom-label-function-on-a-flex-popupmenubutton-control/feed/ 0 Sorting XML documents using an XMLListCollection http://blog.flexexamples.com/2007/12/04/sorting-xml-documents-using-an-xmllistcollection/ http://blog.flexexamples.com/2007/12/04/sorting-xml-documents-using-an-xmllistcollection/#comments Wed, 05 Dec 2007 07:41:08 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/04/sorting-xml-documents-using-an-xmllistcollection/ The following example shows how you can sort an XML document by converting it into an XMLListCollection and applying a sort. You can also easily reverse the current sort by calling the SortField object’s reverse() method and refreshing the XMLListCollection object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- [...]]]> The following example shows how you can sort an XML document by converting it into an XMLListCollection and applying a sort. You can also easily reverse the current sort by calling the SortField object’s reverse() method and refreshing the XMLListCollection object.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/04/sorting-xml-documents-using-an-xmllistcollection/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.utils.StringUtil;

            private function list_labelFunc(item:Object):String {
                return StringUtil.substitute("{0} {1} ({2} {3})",
                        item.@label, // city
                        item.@name, // name
                        item.parent().parent().@abbrev, // league
                        item.parent().@label); // division
            }

            private function checkBox_click(evt:MouseEvent):void {
                sortField.reverse();
                xmlListColl.refresh();
            }
        ]]>
    </mx:Script>

    <mx:XML id="mlb" source="mlb.xml" />

    <mx:XMLListCollection id="xmlListColl"
            source="{mlb.league.division.team}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField id="sortField"
                            name="@label"
                            caseInsensitive="true" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:XMLListCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="reverse()"
                labelPlacement="left"
                click="checkBox_click(event);" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{xmlListColl}"
            labelFunction="list_labelFunc"
            width="300"
            rowCount="8" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/04/sorting-xml-documents-using-an-xmllistcollection/feed/ 2 Sorting and filtering data in an XMLListCollection http://blog.flexexamples.com/2007/08/22/sorting-and-filtering-data-in-an-xmllistcollection/ http://blog.flexexamples.com/2007/08/22/sorting-and-filtering-data-in-an-xmllistcollection/#comments Thu, 23 Aug 2007 06:58:39 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/22/sorting-and-filtering-data-in-an-xmllistcollection/ The following code is a brief example of sorting a Flex XMLListCollection using the Sort and SortField classes, and the XMLListCollection.sort property. We also look at filtering the XMLCollection using a custom filter function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/22/sorting-and-filtering-data-in-an-xmllistcollection/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" [...]]]> The following code is a brief example of sorting a Flex XMLListCollection using the Sort and SortField classes, and the XMLListCollection.sort property. We also look at filtering the XMLCollection using a custom filter function.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/sorting-and-filtering-data-in-an-xmllistcollection/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.collections.SortField;
            import mx.collections.Sort;
            import mx.controls.*;

            private function init():void {
                describeTypeXML = describeType(DataGrid);
                factoryMethodsXLC.source = describeTypeXML.factory.method;
            }

            private function sortXLC():void {
                var nameSort:Sort = new Sort();
                nameSort.fields = [new SortField('@name', true)];

                factoryMethodsXLC.sort = nameSort;
                factoryMethodsXLC.refresh();
            }

            private function filterXLC():void {
                if (filterCh.selected) {
                    factoryMethodsXLC.filterFunction = declaredBy_filterFunc;
                    factoryMethodsXLC.refresh();
                } else {
                    factoryMethodsXLC.filterFunction = null;
                    factoryMethodsXLC.refresh();
                }
            }

            private function declaredBy_filterFunc(item:XML):Boolean {
                return item.@declaredBy == describeTypeXML.@name;
            }
        ]]>
    </mx:Script>

    <mx:XML id="describeTypeXML" />

    <mx:XMLListCollection id="factoryMethodsXLC" />

    <mx:VBox>
        <mx:DataGrid id="factoryMethodsGrid"
                dataProvider="{factoryMethodsXLC}"
                width="400"
                rowCount="7">
            <mx:columns>
                <mx:DataGridColumn dataField="@name" />
                <mx:DataGridColumn dataField="@returnType" />
                <mx:DataGridColumn dataField="@declaredBy" />
            </mx:columns>
        </mx:DataGrid>
        <mx:HBox width="100%">
            <mx:Button id="sortBtn"
                    label="Sort ({factoryMethodsGrid.dataProvider.length} items)"
                    click="sortXLC()" />
            <mx:Spacer width="100%" />
            <mx:CheckBox id="filterCh"
                    label="{describeTypeXML.@name} only"
                    click="filterXLC()" />
        </mx:HBox>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

Apparently this post has been sitting quietly in my drafts folder for so long I can’t even remember writing it, but hopefully it helps somebody out there.

 
]]> http://blog.flexexamples.com/2007/08/22/sorting-and-filtering-data-in-an-xmllistcollection/feed/ 7 Sorting an XMLListCollection using the mx:Sort and mx:SortField MXML tags http://blog.flexexamples.com/2007/08/15/sorting-an-xmllistcollection-using-the-mxsort-and-mxsortfield-mxml-tags/ http://blog.flexexamples.com/2007/08/15/sorting-an-xmllistcollection-using-the-mxsort-and-mxsortfield-mxml-tags/#comments Thu, 16 Aug 2007 07:40:53 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/15/sorting-an-xmllistcollection-using-the-mxsort-and-mxsortfield-mxml-tags/ I actually searched around and couldn’t find any other examples of this, but here is a quick example of using the <mx:Sort /> and <mx:SortField /> MXML tags in Flex to sort an XMLListCollection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/15/sorting-an-xmllistcollection-using-the-mxsort-and-mxsortfield-mxml-tags/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> [...]]]> I actually searched around and couldn’t find any other examples of this, but here is a quick example of using the <mx:Sort /> and <mx:SortField /> MXML tags in Flex to sort an XMLListCollection.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/15/sorting-an-xmllistcollection-using-the-mxsort-and-mxsortfield-mxml-tags/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="myXML" source="http://feeds.feedburner.com/FlexExamples?format=xml" format="e4x" />
    <mx:XMLListCollection id="xlc" source="{myXML..item.category}" sort="{mySort}" />

    <mx:Sort id="mySort">
        <mx:fields>
            <mx:SortField name="*" caseInsensitive="true" />
        </mx:fields>
    </mx:Sort>

    <mx:VBox horizontalAlign="left">
        <mx:Label text="Categories ({xlc.length}):" />
        <mx:List id="list"
                dataProvider="{xlc}"
                rowCount="5"
                width="200"
                creationComplete="{xlc.refresh()}" />
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/15/sorting-an-xmllistcollection-using-the-mxsort-and-mxsortfield-mxml-tags/feed/ 3 Sorting an ArrayCollection using the SortField and Sort classes http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/ http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/#comments Sun, 05 Aug 2007 15:18:48 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/ Sometimes in life you just need data to be sorted. Whether its a case insensitive sort (for names) or a numeric sort (for, uh, numbers), you just want things sorted in a particular order.

This example demonstrates how you can take a bunch of random numbers in an ArrayCollection and sort them numerically in ascending [...]]]> Sometimes in life you just need data to be sorted. Whether its a case insensitive sort (for names) or a numeric sort (for, uh, numbers), you just want things sorted in a particular order.

This example demonstrates how you can take a bunch of random numbers in an ArrayCollection and sort them numerically in ascending order.

Download source (ZIP, 1K) | View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.SortField;
            import mx.collections.Sort;
            import mx.collections.ArrayCollection;
 
            [Bindable]
            private var arrColl:ArrayCollection;
 
            /** This method gets called by the main mx:Application tag and initializes/populates the ArrayCollection object with a bunch of random numbers. */
            private function init():void {
                var i:int;
 
                /* Initialize and populate the ArrayCollection object. */
                arrColl = new ArrayCollection();
                for (i = 0; i < 20; i++) {
                    arrColl.addItem({data:getRandomNumber().toFixed(4)});
                }
            }
 
            /** This method returns a random floating-point number between 0 and 10000. */
            private function getRandomNumber():Number {
                return Math.random() * 10000;
            }
 
            /** This method gets called by the Button control's click handler and creates a new SortField and Sort object which are used to sort the ArrayCollection. */
            private function button_click():void {
                /* Create the SortField object for the "data" field in the ArrayCollection object, and make sure we do a numeric sort. */
                var dataSortField:SortField = new SortField();
                dataSortField.name = "data";
                dataSortField.numeric = true;
 
                /* Create the Sort object and add the SortField object created earlier to the array of fields to sort on. */
                var numericDataSort:Sort = new Sort();
                numericDataSort.fields = [dataSortField];
 
                /* Set the ArrayCollection object's sort property to our custom sort, and refresh the ArrayCollection. */
                arrColl.sort = numericDataSort;
                arrColl.refresh();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list" dataProvider="{arrColl}" textAlign="right" labelField="data" width="100" />
 
    <mx:Button id="button" label="sort items" click="button_click()" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/05/sorting-an-arraycollection-using-the-sortfield-and-sort-classes/feed/ 38