Example: Using an item renderer with the TileList and HorizontalList controls
The TileList and HorizontalList controls display a tiled list of items. The TileList control displays items in vertical
columns. The HorizontalList control displays items in horizontal rows. The TileList and HorizontalList controls
are particularly useful in combination with a custom item renderer for displaying a list of images and other data.
The following image shows a HorizontalList control that is used to display a product catalog:
Each item in the HorizontalList control contains an image, a descriptive text string, and a price. The following
code shows the application that displays the catalog. The item renderer for the HorizontalList control is an MXML
component named Thumbnail.
The file catalog.xml defines the data provider for the HorizontalList control:
The following example shows the Thumbnail.mxml MXML component. In this example, you define the item
renderer to contain three controls: an Image control and two Label controls. These controls examine the data
property that is passed to the item renderer to determine the content to display.
Example: Using an item renderer with a DataGrid control
The DataGrid control works with the DataGridColumn class to configure the grid. For a DataGrid control, you
can specify two types of renderers: one for the cells of each column, and one for the header cell at the top of each
column. To specify an item renderer for a column of a DataGrid control, you use the
DataGridColumn.itemRenderer property. To specify an item renderer for a column header cell, you use the
DataGridColumn.headerRenderer property.
For example, to highlight a column in the DataGrid control, you can use using an icon in the column header cell
to indicate a sale price, as the following item renderer shows:
This item renderer uses a Label control to insert the text “Sale Price!” and an Image control to insert an icon in
the column header.
The following example shows the main application:
In this example, the DataGrid control displays the String true or false in the column to indicate that the price
is a sale price. You can also define an item renderer for that column to display a more compelling icon rather than
text. For an example that uses an item renderer with a DataGrid control, see “Using custom item renderers and
item editors” on page 782.
Example: Using an item renderer with a List control
When you use a custom item renderer with a List control, you specify it using the List.itemRenderer property,
as the following example shows:
The previous example sets the rowHeight property to 75 pixels because the item renderer displays content that
exceeds the default row height of the List control. To see an image that shows this application, see “Using custom
item renderers and item editors” on page 782.
The following item renderer, RendererState.mxml, displays the parts of each List item, and creates a LinkButton
control which lets you open the state’s website:
Example: Using an item renderer with a Tree control
For the Tree control, you use the itemRenderer property to specify a single renderer for all nodes of the tree. If
you define a custom item renderer, you are responsible for handling the display of the entire node, including the
text and icon.
One option is to define an item renderer as a subclass of the default item renderer class, the TreeItemRenderer
class. You can then modify the item renderer as required by your application without implementing the entire
renderer, as the following example shows:
For each node that has a child node, this item renderer displays the node text in red and includes the count of the
number of child nodes in parentheses. The following example uses this item renderer in an application.
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
