The ComboboxRenderer class

This is the class that does all the magic. This class is an extended ComboBox class which means that we inherit the ComboBox behavior to our class and customize that behavior to our needs. In our case we want to read and alter values of the ComboBoxContent object stored in the cell holding the extended ComboBox. We want to be able to alter the object in order to communicate with the client application, maybe to save the values to a database.

ComboboxRenderer class also needs to implement the IFactory interface in order to be rendered in the DataGrid cell.

We start by creating the class.

  1. Right click on the classes folder and select New-ActionScript Class in the context menu.
  2. Write ComboBoxRenderer in the Name text field.
  3. To extend another class we need to state what class we want to extend, we do this by selecting the ComboBox class in the list displayed when we click on the Browse button to the right of the Subclass text field. Slelect the ComboBox class in the list and click the OK button.
  4. Click the Finish button.

This will add a class with an empty constructor to the classes folder. Notice that the extends keyword have been added to the class definition.

package
{
   public class ComboboxRenderer extends ComboBox
   {
      public function ComboboxRenderer()
      {
      }
   }
}

Here’s a list of the import statements in case they aren’t added automatically during the implementation of this class.

   import mx.controls.ComboBox;
   import mx.core.IFactory;
   import mx.events.DropdownEvent;
   import mx.events.FlexEvent;

Next we need to implement the IFactory interface; it’s this interface that makes it possible to add the extended ComboBox control to a cell in the DataGrid. The IFactory contains the definition if one function newInstance that must be added to the class.

   public class ComboboxRenderer extends ComboBox implements IFactory
   {
      //IFactory method
      public function newInstance():*{}

Next we need to add a private field to hold the underlying DataGrid row data. We need this data in order to read and alter the data. We will add properties to get and set the value later.

   //Fields
   private var _data:Object;

Next we need to add event listeners in the constructor that listens to the CREATION_COMPLETE and the CLOSE events. The CREATION_COMPLETE event will initialize the ComboBox and set initial values. The CLOSE event will save the current settings to the underlying ComboBoxContent object.

   public function ComboboxRenderer()
   {
      super();
      addEventListener(FlexEvent.CREATION_COMPLETE, init);
      addEventListener(DropdownEvent.CLOSE, valueChanged);
   }

Next we will write the init function that will set the initial values in the ComboBox. This event function takes a FlexEvent event object that we can use to get the current column index; this index can be used to get the correct ComboBoxContent object from the passed in data.

The first row in the try block gets the current column index. The second row converts the data for that column back to a ComboBoxContent object from which we on the third line collects the list to be displayed in the ComboBox. On the fourth row we assign the list to the ComboBox dataProvider; this will ensure that the list is displayed in the drop down of the ComboBox. On the fifth and last row we set the selectedIndex property of the ComboBox; this will determine which item in the list that will be selected when the ComboBox is rendered.

   private function init(event:FlexEvent):void
   {
      try
      {
         var idx:int = event.target.listData.columnIndex;
         var content:ComboBoxContent = _data[idx] as ComboBoxContent;
         var array:Array = content.list as Array;
         this.dataProvider = array;
         this.selectedIndex = content.index;
      }
      catch(err:Error){}
   }

Next we write the properties that will get and set the data in the ComboBox. The two data properties need s to be overridden in order to get and set the correct underlying data. The valueChanged function is the event function that we added an event listener to in the constructor. It is this function that sets the altered data of the ComboBox to the underlying data in the cell. The first row in the try block gets the current column index from the DataGrid. The second row casts the stored data of the selected column into a ComboBoxContent object to set its index property; by setting this index we then can collect the correct data from the DataGrid and use it in the application.

   override public function get data():Object
   {
      return _data;
   }
 
   override public function set data(value:Object):void
   {
      _data = value;
   }
  
   private function valueChanged(event:DropdownEvent):void
   {
      try
      {
         var idx:int = event.target.listData.columnIndex;
         ComboBoxContent(_data[idx]).index = this.selectedIndex;
      }
      catch(err:Error){}
   }
}