How can I show a list sorted by category, with a category heading above the first item in that category?

I'm trying to show a List of data sorted by a field, County. Currently I have an ArrayCollection setup as the dataprovider to a spark List. I have an ItemRenderer attached to the list and everything works fine. As in the list shows and it is sorted by County properly.

What I'm trying to do however is to have the first item in the Category be preceded by the Category name so we get an output kind of like this.

County 1

Item in County 1 Item in County 1 Item in County 1 Item in County 1

County 2

Item in County 2 Item in County 2 Item in County 2 Item in County 2

County 3

Item in County 3 Item in County 3 Item in County 3 Item in County 3

One of the other programmers on our team 开发者_JAVA技巧accomplished this by injecting a new County Name item before the first item in the next county. That item has an id of -1 and is handled differently by the ItemRenderer. It seems to me like that is not the proper way to do this at all. Does anyone have any better suggestions?

If I understand your problem correctly, the solution is fairly simple: put an additional List in the ItemRenderer of the main List.

An example of a custom ItemRenderer:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark">

    <s:layout>
        <s:VerticalLayout />
    </s:layout>

    <s:Label id="labelDisplay" fontSize="16" />

    <s:List dataProvider="{data.children}" borderVisible="false">
        <s:layout>
            <s:HorizontalLayout />
        </s:layout>
    </s:List>

</s:ItemRenderer>

Your dataprovider might then look something like this:

[Bindable]
private var dp:ArrayList = new ArrayList([
    {label: "County 1", children: new ArrayList(["A", "B", "C"])},
    {label: "County 2", children: new ArrayList(["D"])},
    {label: "County 3", children: new ArrayList(["E", "F"])}
]);

resulting in this output: