A list of items that may be selected.

Display items in the list

Create a data provider in MXML:

<js:List labelField="label">
    <js:dataProvider>
        <fx:Array>
            <fx:Object label="One"/>
            <fx:Object label="Two"/>
            <fx:Object label="Three"/>
            <fx:Object label="Four"/>
            <fx:Object label="Five"/>
        </fx:Array>
    </js:dataProvider>
</js:List>

The labelField specifies which property of the items will be displayed as text in the list's item renderers.

Listen to events

Listen for selection changes:

<js:List id="list" labelField="label" change="onChange(event)"/>
<fx:Script>
    <![CDATA[
        private function onChange(event:Event):void
        {
            var selectedIndex:int = list.selectedIndex;
            var selectedItem:Object = list.selectedItem;
            trace("index:", selectedIndex);
            trace("label:", selectedItem.label);
        }
    ]]>
</fx:Script>

Change list appearance

Set font styles for all items in a single list:

<js:List>
    <js:style>
        <js:SimpleCSSStyles fontFamily="serif" fontSize="20"
            fontWeight="bold" fontStyle="italic" color="#ff0000"/>
    </js:style>
</js:List>

Set a list's border styles:

<js:List>
    <js:style>
        <js:SimpleCSSStyles borderStyle="solid" borderWidth="2"
            borderColor="#ff0000" borderRadius="4"/>
    </js:style>
</js:List>

Set a list's background color:

<js:List>
    <js:style>
        <js:SimpleCSSStyles backgroundColor="#ffcccc"/>
    </js:style>
</js:List>
  • No labels