Sizing and positioning an item editor

When an item editor appears, it appears as a pop-up control above the selected cell of the list-based control. The list-based control also hides the current value of the cell.

The CheckBox control in the previous example, Defining a property to return data, sizes itself to 100% for both width and height, and the VBox container sets its backgroundColor style property to yellow. By sizing the item editor to the size of the cell, and by setting the background color of the container, you completely cover the underlying cell.

The following table describes the properties of the list-based controls that you can use to size the item editor:

Property	Description
`editorHeightOffset`	Specifies the height of the item editor, in pixels, relative to the size of the cell for a DataGridColumn control, or the text field of a Tree control.
`editorWidthOffset`	Specifies the width of the item editor, in pixels, relative to the size of the cell for a DataGridColum control, or the text field of a Tree control.
`editorXOffset`	Specifies the x location of the upper-left corner of the item editor, in pixels, relative to the upper-left corner of the cell for a DataGridColumn control, or from the upper-left corner of the text field of a Tree control.
`editorYOffset`	Specifies the y location of the upper-left corner of the item editor, in pixels, relative to the upper-left corner of the cell for a DataGridColumn control, or from the upper-left corner of the text field of a Tree control.

The following code modifies the definition of the DataGridColumn control from the previous section to use the editorXOffset and editorYOffset properties to move the item editor down and to the right by 15 pixels so that it has a more prominent appearance in the DataGrid control:

<?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>
The executing SWF file for the previous example is shown below:

Adobe Flex 3 Help

Sizing and positioning an item editor