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:

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  4.         <mx:XML id="xml" source="weather.xml"/>
  5.         <mx:DataGrid id="myDatagrid" dataProvider="{xml.city}"
  6.                 variableRowHeight="true" editable="true" rowHeight="50"
  7.                 width="300" height="300">
  8.                 <mx:columns>
  9.                 <mx:DataGridColumn dataField="Location"/>
  10.                 <mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value">
  11.                         <mx:itemEditor>
  12.                                 <mx:Component>
  13.                                         <mx:ComboBox editable="true">
  14.                                                 <mx:dataProvider>
  15.                                                         <mx:String>Mild</mx:String>
  16.                                                         <mx:String>Hot</mx:String>
  17.                                                         <mx:String>Foggy</mx:String>
  18.                                                         <mx:String>Rainy</mx:String>
  19.                                                         <mx:String>Snow</mx:String>
  20.                                                 </mx:dataProvider>
  21.                                         </mx:ComboBox>
  22.                                 </mx:Component>
  23.                         </mx:itemEditor>
  24.                 </mx:DataGridColumn>
  25.                 <mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
  26.                         itemEditor="CloudCover"/>
  27.         </mx:columns>
  28.         </mx:DataGrid>
  29. </mx:Application>
  30.  


Custom component:

  1.  
  2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">
  4.  
  5.         <mx:Script>
  6.                 <![CDATA[
  7.                 import mx.controls.listClasses.ListData;
  8.             import mx.controls.dataGridClasses.DataGridListData;
  9.             import mx.controls.listClasses.BaseListData;
  10.             import mx.controls.dataGridClasses.DataGridItemRenderer
  11.             import mx.events.FlexEvent;
  12.  
  13.             private var _listData:DataGridListData;
  14.             // Define a property for returning the new value to the cell.
  15.             [Bindable]
  16.             public var value:Object;
  17.  
  18.             // Implement the drawFocus() method for the VBox.
  19.             override public function drawFocus(draw:Boolean):void {
  20.                 cbo.setFocus();
  21.             }
  22.  
  23.             override public function get data():Object {
  24.                 return super.data;
  25.             }
  26.  
  27.                         override public function set data(value:Object):void {
  28.                 cbo.data=value[_listData.dataField];
  29.             }
  30.             public function get listData():BaseListData
  31.             {
  32.                 return _listData;
  33.             }
  34.  
  35.             public function set listData(value:BaseListData):void
  36.             {
  37.                 _listData = DataGridListData(value);
  38.             }
  39.  
  40.         ]]>
  41.     </mx:Script>
  42.     <mx:Binding destination="value" source="cbo.value"/>
  43.  
  44.         <mx:ComboBox id="cbo" editable="true" width="100%">
  45.                 <mx:dataProvider>
  46.                         <mx:String>0</mx:String>
  47.                         <mx:String>25</mx:String>
  48.                         <mx:String>50</mx:String>
  49.                         <mx:String>75</mx:String>
  50.                         <mx:String>100</mx:String>
  51.                 </mx:dataProvider>
  52.         </mx:ComboBox>
  53. </mx:VBox>
  54.  

XML data:

  1.  
  2. <?xml version="1.0" encoding="utf-8"?>
  3. <weather>
  4. <city>
  5. <location>Los Angeles</location>
  6. <climate>Mild</climate>
  7. <cloudCoverPercent>25</cloudCoverPercent>
  8. </city>
  9. <city>
  10. <location>San Francisco</location>
  11. <climate>Hot</climate>
  12. <cloudCoverPercent>50</cloudCoverPercent>
  13. </city>
  14. <city>
  15. <location>Paris</location>
  16. <climate>Foggy</climate>
  17. <cloudCoverPercent>0</cloudCoverPercent>
  18. </city>
  19. <city>
  20. <location>Milan</location>
  21. <climate>Hot</climate>
  22. <cloudCoverPercent>25</cloudCoverPercent>
  23. </city>
  24. <city>
  25. <location>London</location>
  26. <climate>Rainy</climate>
  27. <cloudCoverPercent>100</cloudCoverPercent>
  28. </city>
  29. <city>
  30. <location>New York</location>
  31. <climate>Snow</climate>
  32. <cloudCoverPercent>50</cloudCoverPercent>
  33. </city>
  34. <city>
  35. <location>Sydney</location>
  36. <climate>Hot</climate>
  37. <cloudCoverPercent>50</cloudCoverPercent>
  38. </city>
  39. <city>
  40. <location>CapeTown</location>
  41. <climate>Mild</climate>
  42. <cloudCoverPercent>100</cloudCoverPercent>
  43. </city>
  44. </weather>
  45.  

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

This movie requires Flash Player 8

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Add to favorites
  • LinkedIn
  • Reddit
  • RSS
  • Slashdot
  • Technorati
  • Tumblr
  • Twitter



33 Comments »