Flex数据网格自定义渲染器
You define inline item renderers and item editors in the MXML definition of a component. Inline item renderers
and item editors give you complete control over item rendering and cell editing.
Creating a simple inline item renderer or item editor
A simple inline item renderer contains a single control that supports the data property. Flex automatically copies
the current cell data to the item renderer, as the following example shows:
In this example, you use an Image control to display the album cover.
A simple inline item editor contains a single control that supports the data property. Flex automatically copies
the current cell data to the item renderer or item editor, and copies the new cell data back to the list control based
on the value of the editorDataField property, as the following example item editor shows:
In this example, you return the new cell value by using the value property of the NumericStepper control.
Creating a complex inline item renderer or item editor
A complex item renderer or item editor defines multiple controls. For example, the section “Default item
rendering and cell editing” on page 780 showed a DataGrid control that displayed information about albums by
using three text fields. You could add a visual element to your DataGrid control to make it more compelling. To
do that, you modify the data provider so that it contains a reference to a JPEG image of the album cover.
Rather than displaying the album name and album image in separate cells of the DataGrid control, you can use
an inline item renderer to make them appear in a single cell, as the following example shows:
In the preceding example, you define three columns in the DataGrid control, and assign your item renderer to the
second column. For an image that shows the output of this application, see “Using custom item renderers and item
editors” on page 782.
Notice that the Text and Image controls in the item renderer both use the data property to initialize their values.
This is necessary because you defined multiple controls in the item renderer, and Flex cannot automatically
determine which data element in the data provider is associated with each control of the item renderer.
Even if the top-level container of an inline item renderer has a single child control, you must use the data property
to initialize the child control, as the following example shows:
In the preceding example, you make the Image control a child of a VBox container so that you can align the image
in the cell. Because the Image control is now a child of the VBox container, you must initialize it by using the data
property.
You can define multiple controls in a complex inline item editor, which lets you edit multiple values of the data
provider for the list control. Alternatively, you can define a complex inline item editor so it returns a value other
than a String. For more information, see “Working with Item Editors” on page 821.
Items allowed in an inline component
The only restriction on what you can and cannot do in an inline item renderer or editor is that you cannot create
an empty <mx:Component></mx:Component> tag. For example, you can combine effect and style definitions in
an inline item renderer or editor along with your rendering and editing logic.
You can include the following items in an inline item renderer or editor: • Binding tags
• Effect tags
• Metadata tags
• Model tags
• Scripts tags
• Service tags
• State tags
• Styles tags
• XML tags
• id attributes, except for the top-most component
Using the Component tag
You use the <mx:Component> tag to define an inline item renderer or item editor in an MXML file.
Defining the scope in an Component tag
The <mx:Component> tag defines a new scope in an MXML file, where the local scope of the item renderer or item
editor is defined by the MXML code block delimited by the <mx:Component> and </mx:Component> tags. To
access elements outside of the local scope of the item renderer or item editor, you prefix the element name with
the outerDocument keyword.
For example, you define one variable named localVar in the scope of the main application, and another variable
with the same name in the scope of the item renderer. From within the item renderer, you access the application’s
localVar by prefixing it with outerDocument keyword, as the following example shows:
One use of the outerDocument keyword is to initialize the data provider of a control in the inline item editor. For
example, you can use a web service, or other mechanism, to pass data into the application, such as the list of U.S.
states. You can then initialize all ComboBox controls that are used as item editors from a single property of the
application that contains the list of U.S. states.
Specifying a class name to the inline component
You can optionally specify the className property of the <mx:Component> tag to explicitly name the class
generated by Flex for the inline component. By naming the class, you define a way to reference the elements in the
inline component.
For an example using the className property, see “Example: Passing multiple values back from an item editor”
on page 840.
Creating a reusable inline item renderer or item editor
Rather than defining an inline item renderer or item editor in the definition of a component, you can define a
reusable inline item renderer or item editor for use in multiple locations in your application.
For example, you use the <mx:Component> tag to define an inline item editor that consists of a ComboBox control
for selecting the state portion of an address. You then use that inline item editor in two different DataGrid
controls, as the following example shows:
In this example, you specify the id property of the inline item editor defined by the <mx:Component> tag. You
then use data binding to specify the editor as the value of the itemEditor property for the two DataGrid controls.
The inline item editor or item renderer defined in the <mx:Component> tag appears only where you use it in the
DataGrid control; otherwise, Flex ignores it when laying out your application.
扫一扫
1356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
