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"?>
<!-- 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.