Flex lets you define item renderers and item editors in three different ways:

 

Creating an item renderer and item editor

One of the first decisions that you must make when using custom item renderers and item editors is how to implement them. Flex lets you define item renderers and item editors in three different ways:

Drop-in item renderers and item editors 

Insert a single component to define an item renderer or item editor. For more information, see Using a drop-in item renderer or item editor .

 

Inline item renderers and item editors 

Define one or more components using child tags of the list control to define an item renderer or item editor. For more information, see Using an inline item renderer or item editor .

 

Item renderer and item editor components 

Define an item renderer or item editor as a reusable component. For more information, see Using a component as an item renderer or item editor .

 

The following sections describe each technique.

Using a drop-in item renderer or item editor

For simple item renderers and item editors, such as using a NumericStepper control to edit a field of a DataGrid control, you can use a drop-in item editor. A drop-in item renderer or drop-in item editor is a Flex component that you specify as the value of the itemRenderer or itemEditor property of a list control.

In the following example, you specify the NumericStepper control as the item editor for a column of the DataGrid control:

<?xml version="1.0"?>


<!-- itemRenderers/dropin/DropInNumStepper.mxml -->


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">


    


    <mx:Script>


        <![CDATA[                


            import mx.collections.ArrayCollection;


        


            [Bindable]


            private var myDP:ArrayCollection = new ArrayCollection([


                {label1:"Order #2314", quant:3, Sent:true},


                {label1:"Order #2315", quant:3, Sent:false}     


            ]);               


        ]]>


    </mx:Script>





    <mx:DataGrid id="myDG" dataProvider="{myDP}" 


        variableRowHeight="true" 


        editable="true" >


        <mx:columns>


            <mx:DataGridColumn dataField="label1" headerText="Order #"/>


            <mx:DataGridColumn dataField="quant" 


                headerText="Qty"


                itemEditor="mx.controls.NumericStepper"  


                editorDataField="value"


            />


        </mx:columns >


    </mx:DataGrid> 


</mx:Application>


The executing SWF file for the previous example is shown below:

When the user selects a cell in the quant column of the DataGrid control, Flex displays a NumericStepper control with the current cell value.

You might have several locations in your application where users can modify a numeric value. You defined this item editor as a custom component; therefore, you can reuse it anywhere in your application.

For more information on creating item renderers and item editors as components, see Creating item renderers and item editor components .

 

Using an inline item renderer or item editor

In the section Using a drop-in item renderer or item editor , the example shows how easy it is to use drop-in item renderers and item editors. The only drawback to using them is that you cannot configure them. You can specify the drop-in item renderers and item editors only as the values of a list control property.

To create more flexible item renderers and item editors, you develop your item renderer or item editor as an inline component. In the next example, you modify the previous example to use a NumericStepper control as an inline item editor. With an inline item editor, you can configure the NumericStepper control just as if you used it as a stand-alone control.

<?xml version="1.0"?>

<!-- itemRenderers/inline/InlineNumStepper.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    

    <mx:Script>

        <![CDATA[

            import mx.collections.ArrayCollection;

        

            [Bindable]                

            private var myDP:ArrayCollection = new ArrayCollection([

                {label1:"Order #2314", quant:3, Sent:true},

                {label1:"Order #2315", quant:3, Sent:false}     

            ]);               

        ]]>

    </mx:Script>



    <mx:DataGrid id="myDG" dataProvider="{myDP}" 

        variableRowHeight="true" 

        editable="true" >

        <mx:columns>

            <mx:DataGridColumn dataField="label1" headerText="Order #"/>

            <mx:DataGridColumn dataField="quant" editorDataField="value" headerText="Qty">

                <mx:itemEditor>

                    <mx:Component>

                        <mx:NumericStepper stepSize="1" maximum="50"/>

                    </mx:Component>

                </mx:itemEditor>

            </mx:DataGridColumn>

        </mx:columns>

    </mx:DataGrid> 

</mx:Application>

The executing SWF file for the previous example is shown below:

When the user selects a cell in the quant column of the DataGrid control, Flex displays a NumericStepper control with the current cell value.

You might have several locations in your application where users can modify a numeric value. You defined this item editor as a custom component; therefore, you can reuse it anywhere in your application.

For more information on creating item renderers and item editors as components, see Creating item renderers and item editor components .