Styled selected item in a ComboBox

For some reason Flex 2 does not automatically draw the icon of the selected item in a ComboBox. I found some discussion about how to implement this, and came up with a slightly different solution that I thought I would throw out there.

You want to start off with a ComboBox extension that has two private properties: a DisplayObject to reference the icon, and a Shape to house the icons mask. Override createChildren and add the mask as a child. Override measure and check for your icon, if it exists add its width to your measuredWidth. Finally, override updateDisplayList and do a check on the selectedItem property. If it has a valid icon property, instantiate it as you would a class and cast it to a DisplayObject, then assign it to you private icon reference. Draw a rectangle in you mask Shape using the unscaledWidth of the component minus the value of the arrowButtonWidth style as the width of the mask. Then move your text over to the right of the icon.

You should add some more code to ensure the mask gets cleared and that you reposition the text if you move to a selectedItem with no icon attached after viewing one that did have one, but other than that you are good to go.

-Casey