Flash Builder - Customizing comboBox - combobox

Question

I'm populating items to a comboBox from an xml file. I'm trying to customize the font-color of each item that appears in the comboBox. Any suggestions?
Thanks!
--Moe

Answer 1

The process is simple if you are using Flash Builder. Each item in your ComboBox is made of an ItemRenderer. Create a custom item render (file - > new -> mxml component) extending that basic ItemRenderer class then assign this new ItemRenderer to your ComboBox. Now inside your custom ItemRenderer you can change values, font sizes, etc ...

Answer 2

You will need to use an ItemRenderer. Though you have not mentioned but it seems you are using Flex 3. The way of using ItemRenderer is slightly different in Flex 3 vs Flex 4. So here is the version for Flex 3:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:XMLList id="statesXMLList" xmlns="">
<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>
The class for ItemRenderer is ComboBoxItemRenderer which is shown below:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
lbl.text = value.#name;
if(value.#abbrev == "AK") {
lbl.setStyle("color","#FF0000");
}
else if(value.#abbrev == "AR") {
lbl.setStyle("color","#FF00FF");
}
else {
lbl.setStyle("color","#000000");
}
}
]]>
</mx:Script>
<mx:Label id="lbl"/>
</mx:VBox>
Do not forget the last if (default case) whenever you override set data method.