Help with checkbox column layout

Question

Here is the what I need to accomplish:
I need to display a long list(50-200) of checkboxes w/ labels in a multi column format.  They need to be sorted alphabetically downward and accross all columns. If scrolling is needed, then it should only scroll vertically.  Something like the image below.
What I have tried was to use a TileList with a checkbox itemRenderer.  It works great for 1 column and scrolls vertically just fine.  It works great for 3 columns, however when it scrolls it scrolls horizontally and I need it to scroll vertically.  I have attached my code.
One thing I have noticed is when you set 'direction = vertical' for a TileList the list sorts vertically but scrolls horizontally.  If you leave it as default (direction = horizontal), then it sorts horizontally, but scrolls vertically.  I need it to sort vertically and scroll vertically.  I have tried setting the VerticallyScollPolicy and HorizontalScrollPolicy but that just cut off the data instead of changing the scroll direction.
I guess my second question is if this functionality is impossible with a TileList then what component would be a better option.
Thanks in advance for taking the time to answer my questions.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:csc="com.facl.uaf.common.shared.widget.*"
                layout="vertical"
                verticalAlign="top"
                horizontalAlign="center"
                backgroundGradientColors="[0x000000,0x323232]"
                paddingTop="20"
                paddingBottom="20">
    <mx:ArrayCollection id="collection">
        <mx:Object label="Alameda"/>
        <mx:Object label="Alpine"/>
        <mx:Object label="Amador"/>
        <mx:Object label="Butte"/>
        <mx:Object label="Calaveras"/>
        <mx:Object label="Del Norte"/>
        <mx:Object label="El Dorado"/>
        <mx:Object label="Fresno"/>
        <mx:Object label="Kern"/>
        <mx:Object label="Los Angeles"/>
        <mx:Object label="Orange"/>
        <mx:Object label="Placer"/>
        <mx:Object label="Plumas"/>
        <mx:Object label="Riverside"/>
        <mx:Object label="Sacramento"/>
        <mx:Object label="San Diego"/>
        <mx:Object label="San Francisco"/>
        <mx:Object label="Santa Barbara"/>
        <mx:Object label="Santa Clara"/>
        <mx:Object label="Santa Cruz"/>
    </mx:ArrayCollection>
    <mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml"
                 color="#323232"
                 textAlign="left"
                 paddingLeft="20"
                 itemRenderer="mx.controls.CheckBox"
                 verticalScrollPolicy="auto"
                 themeColor="#FFFFFF"
                 dataProvider="{collection}"
                 columnCount="3"
                 width="500"
                 height="100"
                 direction="vertical">
    </mx:TileList>
</mx:Application>

Answer 1

A List class like TileList does a couple of important things.  It only creates enough renderers to fill the viewable portion so you don't end up allocating tons of memory for 1000's of data items, and it has a selection model where you can select one or more data items and it draws a rollover and selection colored backgrounds over the entire renderer.
Do you need that?  If not, a VBox with 3 HBoxes with 1/3 of the checkboxes in each HBox is all you need.  You can use a Repeater to generate the checkboxes or just add them in a loop.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui