| | {section} |
| | {column:width=80%} |
| | |
| | h2. Lists |
| | |
| | The List control displays a vertical list of items. Features include: |
| | * Items displayed are contained within the dataProvider property |
| | * Custom item renderers can be specified |
| | * Custom item editors can also be used |
| | * Single or multiple items can be selected |
| | * The HorizontalList, TileList, DataGrid, Menu, and Tree controls all inherit from the List control |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Item+Renderers} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/TileList} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | h6. Learn more |
| | * {adbe-popup:http://www.adobe.com/devnet/flex/quickstart/using_controls/#section3}Using list-based controls{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | |
| | h2. List control |
| | |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0" |
| | horizontalAlign="left" |
| | verticalGap="15" horizontalGap="15"> |
| | |
| | <mx:Script> |
| | <![CDATA[ |
| | import mx.collections.ArrayCollection; |
| | import mx.rpc.events.ResultEvent; |
| | import mx.events.ListEvent; |
| | |
| | [Bindable] |
| | private var employeeList:ArrayCollection = new ArrayCollection(); |
| | |
| | private function requestEmployees():void { |
| | employeesService.send(); |
| | } |
| | |
| | private function resultHandler(event:ResultEvent):void { |
| | employeeList = event.result.employees.employee as ArrayCollection; |
| | } |
| | |
| | private function showMessage(event:Event):void { |
| | message.text = "You selected: " + event.currentTarget.selectedItem.firstName + ' ' + |
| | event.currentTarget.selectedItem.lastName; |
| | } |
| | ]]> |
| | </mx:Script> |
| | |
| | |
| | <mx:HTTPService |
| | id="employeesService" |
| | url="http://www.flexmonkeys.com/F3GSE/PartIII/CRUD/employees.xml" |
| | result="resultHandler(event)" |
| | /> |
| | |
| | <mx:Button label="Return Employees" |
| | click="requestEmployees()" /> |
| | |
| | <mx:List id="mylist" |
| | labelField="firstName" |
| | dataProvider="{employeeList}" |
| | width="200" height="200" |
| | itemClick="showMessage(event)"/> |
| | |
| | <mx:Text id="message" |
| | paddingTop="20" /> |
| | |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Example |
| | |
| |  | {test-flash:250|325|VList.swf}VList{test-flash} |
| | | {test-flash:325|250|VList.swf}VList{test-flash} |
| | |
| | h2. HorizonalList control |
| | |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0" |
| | horizontalAlign="left" |
| | verticalGap="15" horizontalGap="15"> |
| | |
| | <mx:Script> |
| | <![CDATA[ |
| | import mx.collections.ArrayCollection; |
| | import mx.rpc.events.ResultEvent; |
| | import mx.events.ListEvent; |
| | |
| | [Bindable] |
| | private var employeeList:ArrayCollection = new ArrayCollection(); |
| | |
| | private function requestEmployees():void { |
| | employeesService.send(); |
| | } |
| | |
| | private function resultHandler(event:ResultEvent):void { |
| | employeeList = event.result.employees.employee as ArrayCollection; |
| | |
| | } |
| | |
| | //show text message when user selects image |
| | private function showMessage(event:Event):void { |
| | message.text = "You selected: " + event.currentTarget.selectedItem.firstName + ' ' + |
| | event.currentTarget.selectedItem.lastName; |
| | } |
| | ]]> |
| | </mx:Script> |
| | |
| | |
| | <mx:HTTPService |
| | id="employeesService" |
| | url="http://www.flexmonkeys.com/F3GSE/PartIII/CRUD/employees.xml" |
| | result="resultHandler(event)" |
| | /> |
| | |
| | <mx:Button label="Return Employees" |
| | click="requestEmployees()" /> |
| | |
| | <mx:HorizontalList id="mylist" |
| | labelField="firstName" |
| | dataProvider="{employeeList}" |
| | columnWidth="100" rowHeight="50" |
| | columnCount="5" |
| | itemClick="showMessage(event)"/> |
| | |
| | <mx:Text id="message" |
| | paddingTop="20" /> |
| | |
| | </mx:Application> |
| | {code} |
| | |
| | h2. Rendered Example |
| | |
 | | {test-flash:600|180|HList.swf}HList{test-flash} |
| | | {test-flash:180|600|HList.swf}HList{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Item+Renderers} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/TileList} |
