List control

List control:
The List control displays a vertical list of items. Its functionality is very similar to that of the SELECT form element in HTML. It often contains a vertical scroll bar that lets users access the items in the list. An optional horizontal scroll bar lets users view items when the full width of the list items is unlikely to fit. The user can select one or more items from the list. If there are more items than can be displayed at once, it can display a vertical scroll bar so the user can access all items in the list. An optional horizontal scroll bar lets the user view items when the full width of the list items is unlikely to fit. The user can select one or more items from the list, depending on the value of the allowMultipleSelection property.

codings:

<?xml version=”1.0″?>
<!– Simple example to demonstrate the List Control –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>
<![CDATA[
[Bindable]
public var selectedItem:Object;
]]>
</mx:Script>

<mx:Model id=”mystates”>
<states>
<state label=”Alabama” data=”AL”/>
<state label=”Alaska” data=”AK”/>
<state label=”Arizona” data=”AZ”/>
<state label=”Arkansas” data=”AR”/>
<state label=”California” data=”CA”/>
<state label=”Colorado” data=”CO”/>
<state label=”Connecticut” data=”CT”/>
</states>
</mx:Model>

<mx:Panel title=”List Control ” height=”75%” width=”75%”
paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>

<mx:Label text=”Select a state to see its abbreviation.”/>

<mx:List id=”source” width=”100%” color=”blue”
dataProvider=”{mystates.state}”
change=”this.selectedItem=List(event.target).selectedItem”/>

<mx:VBox width=”100%”>
<mx:Label text=”Selected State: {selectedItem.label}”/>
<mx:Label text=”State abbreviation: {selectedItem.data}”/>
</mx:VBox>

</mx:Panel>
</mx:Application>

Advertisement