<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="yellow">
<!-- itemRenderers/events/myComponents/CityStateEditor.mxml -->
<!-- http://yecon.blog.hexun.com/30375129_d.html -->
<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>
``````````````````````````````````````````````````````````
<!-- itemRenderers/events/ComplexDGEditorReturnObject.mxml -->
<!-- http://yecon.blog.hexun.com/30375129_d.html -->
<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>