Flex Custom Combobox Component

We needed a country combobox that used an array collection as its dataprovider, however would accept a text value (i.e. "Canada") and select the right item based on the text. We extended the combobox control and embedded our countries array collection inside the control for the purpose of this blog entry. Ultimately we will be using an array collection returned by a dataservice.



Several challenges:

searching a specific property of all objects in the arraycollection
binding the selectedText property of our control to a function
setting the default value of the combobox to nothing
I asked around and it was recommended that I loop through the underlying array of the arraycollection. That sounded very microsoft like and I figured there had to be a better way. It was also suggested I add a dummy record to my countries collection with a "Select Country" string and make that element 0. Again, though this would work, it seemed very ms-ugly.

I struggled with this for quite some time but finally got it working. This custom combobox exposes a property called selectedText. I use ChangeWatcher to keep an eye on the property and trigger a function (setCountry) when it changes. I use a sort on the array collection and the use a cursor on the sort to do my searching... much nicer than a nasty loop. I discovered the handy little "prompt" property which I set to "Select Country".

I'll spare you the gory details of my adventure. Here's the final product:



Things to watch out for:

the function called by changewatcher must take an event argument
remember to update the selectedText property on Change event of combobox