Flex List Controls
List controls refer to a special group of controls that display, and potentially allow manipulation of, collections of items. These controls are similar in their use of data providers and item renderers, and in events they dispatch.
Commonly used List controls (in the mx.controls package):
- List - displays a vertical, scrollable list of items
- TileList - displays a number of items laid out in tiles that can be vertically or horizontally scrolled
- DataGrid - displays multiple rows and columns of data
Learn more about the DataGrid control...
List Item Display Properties
TODO: labelField, labelFunction, iconField, iconFunction...
List Item Events
TODO: itemClick, itemDoubleClick...
Data Providers
List controls all have a dataProvider property, an object/collection that contains the data displayed by the control. The value of the property can be any valid Data Provider.
The below example shows a List control created with an inline dataProvider.
<mx:List> <mx:dataProvider> <mx:Array> <mx:String>Yes</mx:String> <mx:String>No</mx:String> <mx:String>Maybe</mx:String> </mx:Array> </mx:dataProvider> </mx:List>
TODO: embed example (ListControls1)
Learn more about Data Providers in Flex...
Item Renderers
List controls often make use of a itemRenderer property...
A List control gives each itemRenderer instance the record of the dataProvider by setting the itemRenderer's data property.
Learn more about Item Renderers in Flex...
Item Renderers are reused and recycled as you scroll through a List. So one instance of an item renderer may be used for renderering more than one item. Thus you must ensure that any custom item renderers account for this and "cleanly" display new data without artifacts from the old data.
Drag-and-Drop Support
List controls (e.g. DataGrid, List, Menu, Tree) in Flex
have built-in drag-and-drop support.
You can make these controls drag initiators by setting the dragEnabled property to true. Similarly, you can make these controls drop targets by setting the dropEnabled property to true. Flex lets you move items by dragging them from a drag-enabled control to a drop-enabled control, or copy them by dragging while pressing the Control key.
The below example shows how to easily setup two List controls for easy drag-and-drop
between each other.
<mx:List id="list1" width="150" height="200" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"> <mx:dataProvider> <mx:Array> <mx:String>One</mx:String> <mx:String>Two</mx:String> <mx:String>Three</mx:String> </mx:Array> </mx:dataProvider> </mx:List> <mx:List id="list2" width="150" height="200" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"> </mx:List>
TODO...embed example (X_DragDrop2)
Learn more about Drag-and-Drop in Flex...