デフォルトでは、アイテムエディタからリストコントロールには単一の値が返されます。リストコントロールの editorDataField プロパティを使用して、アイテムエディタの、新しいデータを持つプロパティを指定します。Flex により、この値が、目的のセルに適したデータ型に変換されます。

デフォルトのアイテムエディタは TextInput コントロールです。したがって、editorDataField プロパティのデフォルト値は "text" で、これは TextInput コントロールの text プロパティを指しています。カスタムのアイテムエディタを使用する場合は、次の例に示すように、editorDataField プロパティを、そのアイテムエディタの該当するプロパティに設定することも必要です。

<?xml version="1.0"?>
<!-- itemRenderers\dropin\DropInNumStepper.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[                
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Order #2314", quant:3, Sent:true},
                {label1:"Order #2315", quant:3, Sent:false}     
            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
        variableRowHeight="true" 
        editable="true" >
        <mx:columns>
            <mx:DataGridColumn dataField="label1" 
                headerText="Order #" />
            <mx:DataGridColumn dataField="quant" 
                itemEditor="mx.controls.NumericStepper"  
                editorDataField="value" />
        </mx:columns >
    </mx:DataGrid> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前述の例では、アイテムエディタとして NumericStepper コントロールを使用するので、editorDataField プロパティを、新しいセルデータを収めた NumericStepper コントロールのプロパティ名である "value" に設定します。

アイテムエディタから複数の値を返す方法の詳細については、例：アイテムエディタからの複数の値の取得を参照してください。

データを返すプロパティの定義

アイテムエディタには、複数のコンポーネントを指定できます。例えば、次の例に示すアイテムエディタは、セルの編集に使用する CheckBox コントロールを子として持つ親コンテナ VBox を含んでいます。

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
     backgroundColor="yellow">

    <mx:Script>
        <![CDATA[
            // Define a property for returning the new value to the cell.
            public var cbSelected:Boolean;            
        ]]>
    </mx:Script>
   
    <mx:CheckBox id="followUpCB" label="Follow up needed" 
        height="100%" width="100%" 
        selected="{data.FollowUp}" 
        click="cbSelected=followUpCB.selected" 
        updateComplete="cbSelected=followUpCB.selected;"/>
</mx:VBox>

前述の例では、セルを選択すると、親の VBox コンテナで定義されているように、黄色の背景に CheckBox コントロールが表示されます。ここで、この CheckBox コントロールを選択または選択解除することで、目的のセルに新しい値が設定されます。

リストコントロールに値を返すために、VBox コンテナでは cbSelected という新しいプロパティを定義します。このような処理が必要な理由は、ユーザー側で editorDataField プロパティに設定できる値が、このアイテムエディタが持つ最上位コンポーネントのプロパティ名に限られているからです。つまり、CheckBox コントロールが VBox コンテナの子である場合、editorDataField プロパティに、その CheckBox コントロールのプロパティ名 selected を設定することはできません。

ユーザーがセルを選択して CheckBox コントロールを開いても、その CheckBox コントロールの状態を変更していない場合は、updateComplete イベントを使用して cbSelected プロパティの値を設定します。

次の例では、顧客連絡先担当者のリストを表示する DataGrid コントロールで、このアイテムエディタを使用します。このリストを構成するデータは、会社名、連絡先担当者名、電話番号およびこの連絡先担当者にフォローアップが必要かどうかを示す列です。

<?xml version="1.0"?>
<!-- itemRenderers\dataGrid\MainDGCheckBoxEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Company: 'Acme', Contact: 'Bob Jones', 
                    Phone: '413-555-1212', Date: '5/5/05' , FollowUp: true },
                {Company: 'Allied', Contact: 'Jane Smith', 
                    Phone: '617-555-3434', Date: '5/6/05' , FollowUp: false} 
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" 
        dataProvider="{initDG}" 
        editable="true" >  
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="Date"/>
            <mx:DataGridColumn dataField="FollowUp" 
                width="150" 
                headerText="Follow Up?" 
                itemEditor="myComponents.EditorDGCheckBox" 
                editorDataField="cbSelected"/>
        </mx:columns>       
    </mx:DataGrid>  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

editorDataField プロパティは、VBox コンテナの新しいプロパティである cbSelected に設定されています。

このメカニズムは、複数のコントロールを持つインラインアイテムレンダラーでも同様に使用できます。例えば、以下のコードに示すように、前述の DataGrid の例を、アイテムエディタコンポーネントではなくインラインアイテムエディタを使用するように変更できます。

<?xml version="1.0"?>
<!-- itemRenderers\inline\InlineDGCheckBoxEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Company: 'Acme', Contact: 'Bob Jones', 
                    Phone: '413-555-1212', Date: '5/5/05' , FollowUp: true },
                {Company: 'Allied', Contact: 'Jane Smith', 
                    Phone: '617-555-3434', Date: '5/6/05' , FollowUp: false} 
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" 
        dataProvider="{initDG}" 
        editable="true">  
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="Date"/>
            <mx:DataGridColumn dataField="FollowUp" 
                width="150" 
                headerText="Follow Up?" 
                editorDataField="cbSelected">
                
                <mx:itemEditor>
                    <mx:Component>
                        <mx:VBox backgroundColor="yellow">          
                            <mx:Script>
                                <![CDATA[
                                    // Define a property for returning 
                                    // the new value to the cell.
                                    [Bindable]
                                    public var cbSelected:Boolean;
                                ]]>     
                            </mx:Script>
                       
                            <mx:CheckBox id="followUpCB" 
                                label="Follow up needed" 
                                height="100%" width="100%" 
                                selected="{data.FollowUp}" 
                                click="cbSelected=followUpCB.selected"/>
                        </mx:VBox>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>       
    </mx:DataGrid>  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。