Programming Flex 3

Customizing List-Based Controls

List-based controls such as lists, data grids, and trees have standard ways in which they display data. For example, a list displays one column of text, data grids display one or more columns of text, and trees display a hierarchical view of data. For many if not most applications, the default ways in which these controls display data are perfectly sufficient. However, there are cases in which you need to alter the displays in one way or another. For example, you may want to display a checkbox in a data grid column rather than standard text.

When you want to customize the way in which a list-based component displays elements, you can use what is called an item renderer. Item renderers allow you to specify what component to use in place of the standard text or text and icon that appear in the component, thus customizing the appearance of the elements in the component. The following components support custom item renderers: List, HorizontalList, DataGrid, Menu, TileList, and Tree.

There are two basic ways in which you can use custom item renderers:

Drop-in item renderers

These are the simplest types of item renderers to implement. With a drop-in item renderer you simply specify a standard UI component to use in a particular column. For example, you can use a checkbox as a drop-in item renderer.

Inline item renderers

These types of item renderers are still rather simple to implement, but they allow you to exert more control over the component. For example, ...