Follow Flex After Dark on Twitter

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

More Examples

TileList with Image Item Renderer

Related Links:

Related Docs
  • Flex DataGrid The Flex DataGrid control is used for displaying tabular data.
  • Flex Item Renderers A Flex Item Renderer is a component used by data-driven controls, including lists, for displaying each item of a data provider.
  • Flex Common Controls Overview of common Flex controls, including: Button, ComboBox, List, and TextArea.
  • Flex Data Providers Several Flex components, including all list-based controls, display data from a data provider, a collection or object that contains the data displayed by the control.
Recent Docs
  • Flex List Controls Flex List controls refer to a special group of controls that display collections of items, usually from a data provider.
  • ActionScript ArrayCollection The ArrayCollection class is a robust collection class that can be more useful than a standard array.
  • Flex Collections Collections are objects that provide a uniform way to access and represent item lists.
  • ActionScript Exceptions ActionScript handles Exceptions using try, catch, and finally.
  • Flex Builder Eclipse Overview of Flex Builder and Eclipse integration.
Random Docs