Example: Using a custom item editor with a List control -- Flex 2.01

You can add an item editor to a List control to let users edit the information for each state, as the following item editor shows:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- itemRenderers\list\myComponents\EditorStateInfo.mxml -->

    <mx:TextInput id="newLabel" text="{data.label}" />
    <mx:TextInput id="newData" text="{data.data}" />
    <mx:TextInput id="newWebPage" text="{data.webPage}" />
</mx:VBox>

You define an item editor that contains three TextInput controls that let the user edit the state name, capital, or web address. This item editor returns three values, so you write an event listener for the itemEditEnd event to write the values to the data provider of the List control, as the following example shows:

<?xml version="1.0"?>
<!-- itemRenderers\list\MainListStateRendererEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    height="700" width="700">

    <mx:Script>
        <![CDATA[

            import mx.events.ListEvent;
            import myComponents.EditorStateInfo;
                        
            // Define the event listener.
            public function processData(event:ListEvent):void {                 

                // Disable copying data back to the control.
                event.preventDefault();

                // Get new label from editor.
                myList.editedItemRenderer.data.label =
EditorStateInfo(event.currentTarget.itemEditorInstance).newLabel.text;

                // Get new data from editor.
                myList.editedItemRenderer.data.data = 
EditorStateInfo(event.currentTarget.itemEditorInstance).newData.text;

                // Get new webPage from editor.
                myList.editedItemRenderer.data.webPage = 
EditorStateInfo(event.currentTarget.itemEditorInstance).newWebPage.text;

                // Close the cell editor.
                myList.destroyItemEditor(); 
                    
                // Notify the list control to update its display.
        myList.dataProvider.notifyItemUpdate(myList.editedItemRenderer);
            }
        ]]>
    </mx:Script>

    <mx:List id="myList" 
        height="180" width="250" 
        editable="true" 
        itemRenderer="myComponents.RendererState" 
        itemEditor="myComponents.EditorStateInfo" 
        variableRowHeight="true" 
        backgroundColor="white" 
        itemEditEnd="processData(event);"> 
        <mx:dataProvider>
            <mx:Object label="Alaska" 
                data="Juneau" 
                webPage="http://www.state.ak.us/"/>
            <mx:Object label="Alabama" 
                data="Montgomery" 
                webPage="http://www.alabama.gov/" />
            <mx:Object label="Arkansas" 
                data="Little Rock" 
                webPage="http://www.state.ar.us/"/>                  
        </mx:dataProvider>
    </mx:List>
</mx:Application>

Subtopics

Using a DateField or ComboBox control as a drop-in item editor

You can use a DateField or ComboBox control as a drop-in item editor with the List control. However, when the data provider is a collection of Objects, you have to set the labelField property of the List control to the name of the field in the data provider modified by the DateField or ComboBox control, as the following example shows:

<?xml version="1.0"?>
<!-- itemRenderers\list\ListEditorDateField.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
        
            import mx.collections.*;
            import mx.controls.DateField;
            import mx.collections.ArrayCollection;
           
            [Bindable]
            private var catalog:ArrayCollection = new ArrayCollection([    
                {confirmed: new Date(), Location: "Spain"},
                {confirmed: new Date(2006,0,15), Location: "Italy"},
                {confirmed: new Date(2004,9,24), Location: "Bora Bora"},
                {confirmed: new Date(), Location: "Vietnam"}
            ]);
        ]]>
    </mx:Script>

    <mx:List id="myList" 
        width="300" height="300"
        rowHeight="50" 
        dataProvider="{catalog}" 
        editable="true" 
        labelField="confirmed" 
        itemEditor="mx.controls.DateField" 
        editorDataField="selectedDate"/>
</mx:Application>

In this example, you specify "confirmed" as the value of the labelField property to specify that the DateField control modifies that field of the data provider.