How to Format text in ComboBox and Set the Row Height in ActionScript

ComboBox is one of the most frequently used component. When I added it into a flash movie via actionscript, I found I can control the format of the text displayed within the box it self, but the textFormat has no effect on the text in the comboBox. Here is what I do.

1. var dpDownMenu:ComboBox = new ComboBox();
2. dpDownMenu.width = 100;
3. dpDownMenu.height = 22;
4. dpDownMenu.x = 2.5;
5. dpDownMenu.y = 4.0;
6. dpDownMenu.textField.setStyle(”textFormat”, menuTextFormat);
7. dpDownMenu.dataProvider = dropData;
8. dpDownMenu.rowCount = uint(dropData.length);
9. dpDownMenu.addEventListener(Event.CHANGE, adjustItems);
10. addChild(dpDownMenu);

I try to format text (the labels) inside ComboBox component instance. The method setStyle seems to do very little to ComboBox components that it actually should do. I asked google and some experienced, in fact, the StyleManager.setStyle sets a style globally, i.e. for all components that are capable of using it. Although this is a way to force the ComboBox to format it’s text, its drawback is that you format nearly everything even if you don’t want to.

Not sure but, anyway the fact that StyleManager.setStyle works could be suggestion of what is actually happening. Internally the ComboBox component makes use of the List component. The List component in turn makes use of some CellRenderer class, that is responsible for rendering the separate cells.

It could be that when we set the textFormat style of ComboBox it ignores it instead of pushing it down to List and through List to CellRenderer. This could explain why the formatting doesn’t work with ComboBox.setStyle (for just one instance of ComboBox) nor it does with StyleManager.setComponentStyle (for the whole ComboBox class, but not other component classes).
On the other hand, when we use StyleManager.setStyle, we set the style for everything in the components structure, including the CellRenderer itself – and this is why in this single case it works.

The following source code works fine.

1. var dpDownMenu:ComboBox = new ComboBox();
2. dpDownMenu.width = 100;
3. dpDownMenu.height = 22;
4. dpDownMenu.addItem({data:1,label:’TestItem01′});
5. dpDownMenu.addItem({data:2,label:’TestItem02′});
6. dpDownMenu.addItem({data:3,label:’TestItem03′});
7. dpDownMenu.x = 2.5;
8. dpDownMenu.y = 4.0;
9. var menuTextFormat:TextFormat = new TextFormat();
10. menuTextFormat.size = 32;
11. menuTextFormat.font = “Arial”;
12. dpDownMenu.textField.setStyle(”textFormat”, menuTextFormat);
13. dpDownMenu.dropdown.setRendererStyle(”textFormat”, menuTextFormat);
14. dpDownMenu.dropdown.rowHeight = 22;
15. dpDownMenu.dropdownWidth = 100;
16. dpDownMenu.dataProvider = dropData;
17. dpDownMenu.rowCount = uint(dropData.length);
18. dpDownMenu.addEventListener(Event.CHANGE, adjustItems);
19. addChild(dpDownMenu);