ComboBox Component

The FlexJS ComboBox uses a list to present its choices. This document takes a look at the ComboBox and how to customize it. Since the ComboBox borrows from the List component, reading about the List component can give you a better understanding of what is involved.

The FlexJS ComboBox has two parts: a text input field a drop-down list. The usual behavior is to select an item from the list and have it populate the input field so you know what you have selected. Derivations include the ability to enter a value into the input field that does not correspond to an item in the drop-down list and being able to type and have the list appear automatically and select an item as you type. The base ComboBox component does not support either of these derivations, but you can create beads to make the ComboBox behave how you wish.

The basic ComboBox displays strings because the style associated with the ComboBox is set up to display strings. Here is the ComboBox style defined in the defaults.css file:

ComboBox
{
    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ComboBoxModel");
    IBeadView: ClassReference("org.apache.flex.html.beads.ComboBoxView");
    IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ComboBoxController");
    IPopUp: ClassReference("org.apache.flex.html.supportClasses.DropDownListList");
    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
}

The ComboBox uses the DropDownListList for its pop-up. Here is the style for that component:

DropDownListList
{
    IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.TextItemRendererFactoryForArrayData");
    IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory");
    IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer");
}

The itemRenderer for DropDownListList is specified as the StringItemRenderer.

Custom Item Renderers

If you want to use a custom item renderer for a ComboBox you need to make a couple of alterations.

First, create a component that extends DropDownListList. This component does not have to do or add anything; you just want the class name.

package products
{
	import org.apache.flex.html.supportClasses.DropDownListList;
	
	public class ProductDropList extends DropDownListList
	{
		public function ProductDropList()
		{
			super();
		}
	}
}

Next, define a custom style for this new class:

sample|ProductDropList {
    IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
    IItemRenderer: ClassReference("products.ProductItemRenderer");
}

This new drop-down list component uses the more generic DataItemRendererFactoryForArrayData and specifies a custom item renderer.

Finally, associate your drop-down list component with the ComboBox in a custom style.

.productComboBox {
    IPopUp: ClassReference("products.ProductDropList");
}
...
<basic:ComboBox className="productComboBox">
...
</basic:ComboBox>

The ComboBox will use an instance of ProductDropList for its pop-up. This in turn - due to the style definition - use the custom item renderer, ProductItemRenderer, for all of the items in the pop-up list.