A list of items that may be selected.

Display items in the list

Create a data provider in MXML:

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

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)"/>
       private function onChange(event:Event):void
var selectedIndex:int = list.selectedIndex;
var selectedItem:Object = list.selectedItem;
trace("index:", selectedIndex);
trace("label:", selectedItem.label);

Change list appearance

Set font styles for all items in a single list:

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

Set a list's border styles:

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

Set a list's background color:

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