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!
Hi Peter,
i’ve a problem with the
selectedItemproperty of the combobox when using an array as dataProvider.I got a dataGrid listing from httpService, e4x format xml.
sample xml is:
I want to automatically select combobox item via the datagrid
selectedItemaddressing.<mx:ComboBox id="ed_fTransport" editable="false" dataProvider="['virtual','local','relay']" selectedItem="{domainList.selectedItem.transport}"/> <!-- for testing --> <mx:Text id="testBox" text="{domainList.selectedItem.transport}" />In this case, dataGrid
selectedItemproperty for transport value retuns an<mx_internal_uid>together with actual value like:Looked in bug db however could not find any solution yet. I could use xmllist or fire up a function in actionscript, but this way it is easy to code, especially if you have lot’s of similar form elements in an app.
Thanks.
Does any one know how to extend the length of the ComboBox dropdown menu? I would like to see all the options on first click, instead of needing a scrollbar.
Any ideas?
KC,
Try setting the
rowCountproperty on the ComboBox object to the length of the data provider.Peter
did anybody try flex2? its more easy and not very complicated