[flexcoders] Error(s) in "Passing multiple values back from an item editor" example

[mmyszew]

If the Flex 3 "Passing multiple values back from an item editor" example is run 
with the debugger, the following messages appear repeatedly.

warning: unable to bind to property 'State' on class 'Object' (class is not an 
IEventDispatcher)
warning: unable to bind to property 'City' on class 'Object' (class is not an 
IEventDispatcher)

In addition, If you enter a new city and immediately click the yellow 
background of the city/state cell, the new city doesn't show in the renderer. 
However, the new city is there if you get the editor to display again.

I'm a relative newbie and would like to use this example as a starting point 
for an application, but I hesitate to start with something that looks broken.

Your help would be much appreciated.

Mat Myszewski

Here's the code pasted from the Help files (two files).

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml";  
    backgroundColor="yellow">
<!-- itemRenderers\events\myComponents\CityStateEditor.mxml -->

    <mx:TextInput id="setCity"  width="130" text="{data.City}"/>
                            
    <mx:ComboBox id="pickState" selectedItem="{data.State}">
        <mx:dataProvider>
            <mx:String>AL</mx:String>
            <mx:String>AK</mx:String>
            <mx:String>AR</mx:String>
            <mx:String>CA</mx:String>
            <mx:String>MA</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:VBox>

<?xml version="1.0"?>
<!-- itemRenderers\events\ComplexDGEditorReturnObject.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";  
    width="700">
    
    <mx:Script>
        <![CDATA[

            import mx.events.DataGridEvent;
            import mx.events.DataGridEventReason;
            import mx.collections.ArrayCollection;
            import myComponents.CityStateEditor;
                        
            [Bindable]
            public var initDG:ArrayCollection = new ArrayCollection([
                {Company: 'Acme', Contact: 'Bob Jones', 
                    Phone: '413-555-1212', City: 'Boston', State: 'MA'},
                {Company: 'Allied', Contact: 'Jane Smith', 
                    Phone: '617-555-3434', City: 'SanFrancisco', State: 'CA'} 
             ]);
                
            // Define the event listener.
            public function processData(event:DataGridEvent):void {
                // Check the reason for the event.
                if (event.reason == DataGridEventReason.CANCELLED){
                    // Do not update cell.
                    return;
                }           

                if(event.dataField == "City and State")
                {
                    // Disable copying data back to the control.
                    event.preventDefault();

                    // Get new city from editor.
                    myGrid.editedItemRenderer.data.City = 
CityStateEditor(DataGrid(event.target).itemEditorInstance).setCity.text;

                    // Get new state from editor.
                    myGrid.editedItemRenderer.data.State = 
CityStateEditor(DataGrid(event.target).itemEditorInstance).pickState.selectedItem;

                    // Close the cell editor.
                    myGrid.destroyItemEditor();

                    // Notify the list control to update its display.
                    myGrid.dataProvider.itemUpdated(event.itemRenderer.data);
                }
            }           
        ]]>
    </mx:Script>
    
    <mx:DataGrid id="myGrid" 
        rowHeight="75" 
        dataProvider="{initDG}" 
        editable="true" 
        itemEditEnd="processData(event);">  
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="City and State" width="150"
                    itemEditor="myComponents.CityStateEditor">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Text selectable="false" width="100%" 
                            text="{data.City}, {data.State}"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>       
    </mx:DataGrid>      
</mx:Application>