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>