Populating a ComboBox from DB query

Question

Hello –
I have created a ComboBox to allow users to choose a category
as a filter for a products catalog. The list of categories is
returned by one of the functions of a ColdFusion CFC I’m
using in the app; it has been tested and examined in the debugger
and is returning the correct ArrayCollection.
For now, I have ended up hard coding the ArrayCollection that
populates the ComboBox, like this:
<mx:ComboBox id="series" styleName="glass" width="250"
rowCount="16"
change="someFunction();">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Object label="All Categories" data="0"/>
<mx:Object label="Interlocking Puzzles" data="1"/>
<mx:Object label="Math Games" data="2"/>
// etc. - 16 categories
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>
Of course, the above works fine, but I would prefer to use
the CFC. I tried something like:
<mx:ArrayCollection id="categList"
source="mx.utils.ArrayUtil.toArray(roService.roMethod.result);"
<mx:ComboBox dataProvider="{categList}" />,
but I don’t know how to tell the component what the
‘label’ is and what the ‘data’ is . I am
sure this is an easy one for someone with a little experience.
Please, somebody, give me an idea how to code this, or at least
where I can look it up. I have read the whole help material, but
can’t figure it out.
Regards,
Carlos

Answer 1

For top-level properties of your item objects (which I think
you will have), just specify the labelField. For values in nested
objects, or for calculated or concatenated columns, you wil need to
use a labelFunction.
I advise against binding directly to the result
("lastResult", to be specific when binding) and advise using a
result handler function in which you can inspect the exact
structure of the event.result object (just "result" in an event
handler).
To work up to this, why not hard code a bit of dataProvider
that is EXACTLY what you think you will be getting from the CFC.
Put it in a [Bindable] variable and bind the combobox dataProvider
to that. Use labelField or labelFunction to get the combobox to
work with that, then implement the data service call, and in its
result handler, assign the event.result to the bindable variable.
Voila!
Tracy