The following example shows how you can create a simple ComboBox item renderer which displays multiline items in the ComboBox control’s drop down menu.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/25/creating-a-custom-combobox-item-renderer-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:XMLList id="statesXMLList">
<state abbrev="AL" name="Alabama" />
<state abbrev="AK" name="Alaska" />
<state abbrev="AZ" name="Arizona" />
<state abbrev="AR" name="Arkansas" />
<state abbrev="CA" name="California" />
<state abbrev="CO" name="Colorado" />
<state abbrev="CT" name="Connecticut" />
</mx:XMLList>
<mx:ComboBox id="comboBox"
prompt="Please select a State..."
dataProvider="{statesXMLList}"
rowCount="3"
labelField="@name"
itemRenderer="ComboBoxItemRenderer" />
</mx:Application>
View ComboBoxItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/25/creating-a-custom-combobox-item-renderer-in-flex/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="plain">
<mx:Label text="{data.@name}"
fontSize="11"
fontWeight="bold" />
<mx:Label text="{data.@abbrev}"
fontSize="9"
paddingLeft="10" />
</mx:VBox>
View source is enabled in the following example.
peterd,
i’m designing custom combo box to auto open on mouseover and auto close on mouse out (i.e. without mouse selection). i’d like to also remove the down arrow entirely.
please post an example.
in my attempts, mouseOver=”combobox.open()” opens the drop down list on mouseover. no problems there.
however mouseOut=”combobox.close()” is triggered when the mouse leaves the combo box (fine) and when the mouse pointer moved into the drop down list (bugger!).
playing with itemRollOver/Out gets trick.
thought i’d challenge you here :^)
Thanks for the blog, it’s very useful.
Can someone suggest how to make an “editable” combobox? simply adding editable=true - only changes the display behavior, how does one return then new value?
Dan, you get the new value by working with the “value” property of the comboBox.
Thanks a ton! Exactly what I was looking for!