Creating a custom ComboBox item renderer in Flex at Flex Examples

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.

View MXML

<?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.

<root> <row> <domain>batidental.com.tr</domain> <description/> <alias>21</alias> <maxalias>100</maxalias> <mailbox>0</mailbox> <maxmailbox>100</maxmailbox> <quota>100</quota> <transport>virtual</transport> <backupmx>NO</backupmx> <modified>2008-09-20 11:19:19</modified> <active>YES</active> </row> <row> .. </row> </root>

<mx:ComboBox id="ed_fTransport" editable="false" dataProvider="['virtual','local','relay']" selectedItem="{domainList.selectedItem.transport}"/>  <mx:Text id="testBox" text="{domainList.selectedItem.transport}" />

September 2007
M	T	W	T	F	S	S
« Aug		Oct »
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

September 2007

« Aug

Oct »

8 Responses to “Creating a custom ComboBox item renderer in Flex”

Feed for this Entry View blog reactions

1 flex_sd Sep 26th, 2007 at 10:30 am

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.
2 Dan Nov 6th, 2007 at 7:27 pm

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?
3 Javier Julio Feb 20th, 2008 at 1:30 pm

Dan, you get the new value by working with the “value” property of the comboBox.
4 Brent Apr 2nd, 2008 at 11:49 am

Thanks a ton! Exactly what I was looking for!

5 Tolga Oct 6th, 2008 at 11:32 am

Hi Peter,

i’ve a problem with the selectedItem property 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 selectedItem addressing.

In this case, dataGrid selectedItem property for transport value retuns an <mx_internal_uid> together with actual value like:

<transport>
  virtual
  <mx_internal_uid>7B709DAD-E0F2-FB4C-4ACA-D3600DBF8C3B</mx_internal_uid>
</transport>

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.

6 KC Jan 2nd, 2009 at 9:41 pm

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?
7 Peter deHaan Jan 3rd, 2009 at 12:21 am

KC,

Try setting the rowCount property on the ComboBox object to the length of the data provider.

Peter
8 Anonymous Jan 30th, 2009 at 10:54 pm

did anybody try flex2? its more easy and not very complicated