Example: Using an item editor with a DataGrid control

For examples of using item editors with the DataGrid control, see Returning data from an item editor.

Example: Using a custom item editor with a List control

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>
The executing SWF file for the previous example is shown below:

This example uses the RendererState.mxml renderer. You can see that renderer in the section Example: Using an item renderer with a List control.

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>
The executing SWF file for the previous example is shown below:

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.

Example: Using a custom item editor with a Tree control

In a Tree control, you often display a single label for each node in the tree. However, the data provider for each node may contain additional data that is normally hidden from view.

In this example, you use the Tree control to display contact information for different companies. The Tree control displays the company name as a branch node, and different department names within the company as leaf nodes. Selecting any node opens a custom item editor that lets you modify the phone number or contact status of the company or for any department in the company.

The top node in the Tree control is not editable. Therefore, this example uses the itemEditBeginning event to determine if the user selects the top node. If selected, the event listener for the itemEditBeginning event prevents editing from occurring, as the following example shows:

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

    <mx:Script>
        <![CDATA[
        
        import mx.events.ListEvent;     
        import myComponents.TreeEditor;
 
        private var contacts1:Object = 
          {label: "top", children: [
            {label: "Acme", status: true, phone: "243-333-5555", children: [
              {label: "Sales", status: true, phone: "561-256-5555"},
              {label: "Support", status: false, phone: "871-256-5555"}
            ]},
            {label: "Ace", status: true, phone: "444-333-5555", children: [
              {label: "Sales", status: true, phone: "232-898-5555"},
              {label: "Support", status: false, phone: "977-296-5555"},
            ]},
            {label: "Platinum", status: false, phone: "521-256-5555"}
        ]};
            
        private function initCatalog(cat:Object):void {
            myTree.dataProvider = cat;
        }
            
        // Define the event listener for the itemEditBeginning event 
        // to disable editing when the user selects 
        // the top node in the tree.
        private function disableEditing(event:ListEvent):void {
            if(event.rowIndex==0) {  
                event.preventDefault(); 
            }
        }                                       
            
        // Define the event listener for the itemEditEnd event 
        // to copy the updated data back to the data provider 
        // of the Tree control.
        public function processData(event:ListEvent):void {    
                            
            // Disable copying data back to the control.
            event.preventDefault();

            // Get new phone number from editor.
            myTree.editedItemRenderer.data.phone =
    TreeEditor(event.currentTarget.itemEditorInstance).contactPhone.text;

            // Get new status from editor.
            myTree.editedItemRenderer.data.status =
    TreeEditor(event.currentTarget.itemEditorInstance).confirmed.selected;

            // Close the cell editor.
            myTree.destroyItemEditor(); 
                    
            // Notify the list control to update its display.
    myTree.dataProvider.notifyItemUpdate(myTree.editedItemRenderer);
        }                       
        ]]>     
    </mx:Script>
    
    <mx:Tree id="myTree" 
        width="400" height="400" 
        editable="true"  
        itemEditor="myComponents.TreeEditor" 
        editorHeightOffset="75" editorWidthOffset="-100" 
        editorXOffset="40" editorYOffset="30" 
        creationComplete="initCatalog(contacts1);" 
        itemEditBeginning="disableEditing(event);" 
        itemEditEnd="processData(event);"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

You specify the custom item editor using the itemEditor property of a tree control. You also use the editorHeightOffset, editorWidthOffset, editorXOffset, and editorYOffset properties to position the item editor.

The following item editor, defined in the file TreeEditor.mxml, lets you edit the data associated with each item in a Tree control:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- itemRenderers/tree/myComponents/TreeEditor.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            // Define variables for the new data.
            public var newPhone:String;
            public var newConfirmed:Boolean;

        ]]>     
    </mx:Script>

    <!-- Display item label.-->
    <mx:Label text="{data.label}"/>

    <!-- Display the text 'Phone:' and let the user edit it.-->
    <mx:HBox>
        <mx:Text text="Phone:"/>
        <mx:TextInput id="contactPhone" 
            width="150" 
            text="{data.phone}"
            change="newPhone=contactPhone.text;"/>
    </mx:HBox>

    <!-- Display the status using a CheckBox control 
        and let the user edit it.-->
    <mx:CheckBox id="confirmed" 
        label="Confirmed"
        selected="{data.status}" 
        click="newConfirmed=confirmed.selected;"/>
</mx:VBox>