Flex：itemEditEnd与itemEditBegin应用实例

可以使用itemEditBegin和itemEditEnd事件来检查传向或回传自itemEditor的数据。如，可以格式化与验证数据。

<?xml version="1.0"?>
<!-- itemRenderers/events/BeginEditEventAccessEditor.mxml -->

<!-- http://yecon.blog.hexun.com/30375399_d.html-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
      <![CDATA[
        import mx.events.DataGridEvent;
        import mx.controls.NumericStepper;
        import mx.collections.ArrayCollection;
        import mx.controls.listClasses.IDropInListItemRenderer;
   
        [Bindable]               
        private var myDP:ArrayCollection = new ArrayCollection([
            {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
            {Artist:'Pavement', Album:'Crooked Rain, Crooked Rain', Price:10.99},
            {Artist:'Pavement', Album:'Wowee Zowee', Price:12.99},
            {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
            {Artist:'Pavement', Album:'Terror Twilight', Price:11.99}
        ]);              
           
        // Handle the itemEditBegin event.
        private function modifyEditedData(event:DataGridEvent):void
        {
            // Get the name of the column being editted.
            var colName:String = myDataGrid.columns[event.columnIndex].dataField;
   
            if(colName=="Price")
            {
                // Handle the event here.
                event.preventDefault();
       
                // Creates an item editor.               
                myDataGrid.createItemEditor(event.columnIndex,event.rowIndex);
               
                // All item editors must implement the IDropInListItemRenderer interface
                // and the listData property.
                // Initialize the listData property of the editor.
                IDropInListItemRenderer(myDataGrid.itemEditorInstance).listData =
                    IDropInListItemRenderer(myDataGrid.editedItemRenderer).listData;
               
                // Copy the cell value to the NumericStepper control.
                myDataGrid.itemEditorInstance.data = myDataGrid.editedItemRenderer.data;

                // Add 20 percent to the current price.
                NumericStepper(myDataGrid.itemEditorInstance).value +=
                    0.2 * NumericStepper(myDataGrid.itemEditorInstance).value;   
           }
        }
      ]]>
    </mx:Script>

    <mx:DataGrid id="myDataGrid" dataProvider="{myDP}"
        editable="true"
        itemEditBegin="modifyEditedData(event);"
        rowHeight="60">
        <mx:columns>
            <mx:DataGridColumn dataField="Artist" />
            <mx:DataGridColumn dataField="Album" width="130" />
            <mx:DataGridColumn dataField="Price" editorDataField="value">
                <mx:itemEditor>
                    <mx:Component>
                        <mx:NumericStepper stepSize="0.01" maximum="500"/>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

`````````````````````````````````````````````````````````````````````

<?xml version="1.0"?>
<!-- itemRenderers/events/EndEditEventFormatter.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   
    <mx:Script>
        <![CDATA[
       
            import mx.controls.TextInput;
            import mx.events.DataGridEvent;
            import mx.events.DataGridEventReason;
            import mx.formatters.NumberFormatter;
            import mx.collections.ArrayCollection;
       
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'Pavement', Album:'Slanted and Enchanted',
                    Price:11.99},
                {Artist:'Pavement', Album:'Brighten the Corners',
                    Price:11.99 }
            ]);
           
            // Define the number formatter.
            private var myFormatter:NumberFormatter=new NumberFormatter();
           
            // Define the eventlistner for the itemEditEnd event.
            public function formatData(event:DataGridEvent):void {  
                // Check the reason for the event.
                if (event.reason == DataGridEventReason.CANCELLED)
                {
                    // Do not update cell.
                    return;
                }           

                // Get the new data value from the editor.
                var newData:String=
                    TextInput(event.currentTarget.itemEditorInstance).text;

                // Determine if the new value is an empty String.
                if(newData == "") {
                    // Prevent the user from removing focus,
                    // and leave the cell editor open.
                    event.preventDefault();
                    // Write a message to the errorString property.
                    // This message appears when the user
                    // mouses over the editor.
                    TextInput(myGrid.itemEditorInstance).errorString=
                        "Enter a valid string.";
                    return;
                }

                // For the Price column, return a value
                // with a precision of 2.
                if(event.dataField == "Price") {
                    myFormatter.precision=2;
                    TextInput(myGrid.itemEditorInstance).text=
                        myFormatter.format(newData);
                }
            }          
        ]]>
    </mx:Script>
   
    <mx:DataGrid id="myGrid"
        dataProvider="{initDG}"
        editable="true"
        itemEditEnd="formatData(event);" >
        <mx:columns>
            <mx:DataGridColumn dataField="Artist"/>
            <mx:DataGridColumn dataField="Album"/>
            <mx:DataGridColumn dataField="Price"/>
        </mx:columns>      
    </mx:DataGrid> 
</mx:Application>