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...

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...

More Examples

TileList with Image Item Renderer

Related Links:

• Data Providers
• Item Renderers
• Collections