アイテムエディタが表示されるときは、リストコントロールの選択したセルの上にポップアップコントロールとして表示されます。リストコントロールによって、セルの現在の値も隠されます。

データを返すプロパティの定義にある前述の例の CheckBox コントロールでは、width と height の両方を 100 ％としてサイズが設定されています。また、VBox コンテナでは、backgroundColor スタイルプロパティが黄色に設定されています。アイテムエディタをセルと同じサイズに設定し、コンテナに背景色を設定することで、下に表示されているセルを完全に覆い隠すことができます。

次の表は、アイテムエディタのサイズを設定するために使用できるリストコントロールのプロパティを示しています。

次に示すコードでは、前のセクションにある DataGridColumn コントロールの定義を変更し、editorXOffset プロパティと editorYOffset プロパティを使用して、アイテムエディタを下方および右方に 15 ピクセルずつ移動し、DataGrid コントロールの中でより目立つ外観となるようにします。

<?xml version="1.0"?>
<!-- itemRenderers\inline\InlineDGCheckBoxEditorWithOffsets.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" 
                editorXOffset="15" 
                editorYOffset="15">
                
                <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 ファイルは以下のとおりです。