Here is a sample that came about as usual, from working on an issue with a customer. I found I didn’t have a good example of a combobox itemEditor. This sample came about when moving from using a combobox as an inline editor to moving to a combobox within a custom component as an editor. Wrapping the combobox in a VBox within the custom component caused some errors and undesirable behavior. In order to wire up data and tabbing/focus behavior you have to remember you component should implement IDropInListItemRenderer and IFocusManagerComponent. See the following sample code and running sample:

App:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:XML id="xml" source="weather.xml"/>
    <mx:DataGrid id="myDatagrid" dataProvider="{xml.city}"
        variableRowHeight="true" editable="true" rowHeight="50"
        width="300" height="300">
        <mx:columns>
        <mx:DataGridColumn dataField="Location"/>
        <mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value">
            <mx:itemEditor>
                <mx:Component>
                    <mx:ComboBox editable="true">
                        <mx:dataProvider>
                            <mx:String>Mild</mx:String>
                            <mx:String>Hot</mx:String>
                            <mx:String>Foggy</mx:String>
                            <mx:String>Rainy</mx:String>
                            <mx:String>Snow</mx:String>
                        </mx:dataProvider>
                    </mx:ComboBox>
                </mx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
            itemEditor="CloudCover"/>
    </mx:columns>
    </mx:DataGrid>
</mx:Application>
 


Custom component:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">

    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.ListData;
            import mx.controls.dataGridClasses.DataGridListData;
            import mx.controls.listClasses.BaseListData;
            import mx.controls.dataGridClasses.DataGridItemRenderer
            import mx.events.FlexEvent;

            private var _listData:DataGridListData;
            // Define a property for returning the new value to the cell.
            [Bindable]
            public var value:Object;            

            // Implement the drawFocus() method for the VBox.
            override public function drawFocus(draw:Boolean):void {
                cbo.setFocus();
            }

            override public function get data():Object {
                return super.data;
            }            

            override public function set data(value:Object):void {
                cbo.data=value[_listData.dataField];
            }
            public function get listData():BaseListData
            {
                return _listData;
            }

            public function set listData(value:BaseListData):void
            {
                _listData = DataGridListData(value);
            }  

        ]]>
    </mx:Script>
    <mx:Binding destination="value" source="cbo.value"/>
   
    <mx:ComboBox id="cbo" editable="true" width="100%">
        <mx:dataProvider>
            <mx:String>0</mx:String>
            <mx:String>25</mx:String>
            <mx:String>50</mx:String>
            <mx:String>75</mx:String>
            <mx:String>100</mx:String>                                             
        </mx:dataProvider>
    </mx:ComboBox>
</mx:VBox>
 

XML data:

<?xml version="1.0" encoding="utf-8"?>
<weather>
<city>
<Location>Los Angeles</Location>
<Climate>Mild</Climate>
<CloudCoverPercent>25</CloudCoverPercent>
</city>
<city>
<Location>San Francisco</Location>
<Climate>Hot</Climate>
<CloudCoverPercent>50</CloudCoverPercent>
</city>
<city>
<Location>Paris</Location>
<Climate>Foggy</Climate>
<CloudCoverPercent>0</CloudCoverPercent>
</city>
<city>
<Location>Milan</Location>
<Climate>Hot</Climate>
<CloudCoverPercent>25</CloudCoverPercent>
</city>
<city>
<Location>London</Location>
<Climate>Rainy</Climate>
<CloudCoverPercent>100</CloudCoverPercent>
</city>
<city>
<Location>New York</Location>
<Climate>Snow</Climate>
<CloudCoverPercent>50</CloudCoverPercent>
</city>
<city>
<Location>Sydney</Location>
<Climate>Hot</Climate>
<CloudCoverPercent>50</CloudCoverPercent>
</city>
<city>
<Location>CapeTown</Location>
<Climate>Mild</Climate>
<CloudCoverPercent>100</CloudCoverPercent>
</city>
</weather>
 

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 9

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis



27 Comments »