Flex中如何通过tabStyleName, tabWidth和textAlign样式，设置TabBar控件内文本对齐方式

main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Applicationname="TabBar_tabStyleName_textAlign_test"
3. xmlns:mx="http://www.adobe.com/2006/mxml"
4. layout="vertical"
5. verticalAlign="middle"
6. backgroundColor="white">
8. <mx:Style>
9. .customTabStyleName {
10. textAlign: center;
11. }
12. </mx:Style>
14. <mx:Script>
15. <![CDATA[
16. import mx.events.ListEvent;
18. private function comboBox_change(evt:ListEvent):void {
19. var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTabStyleName");
20. cssObj.setStyle("textAlign", comboBox.selectedItem.label);
21. }
22. ]]>
23. </mx:Script>
25. <mx:Arrayid="comboBoxDP">
26. <mx:Objectlabel="left" />
27. <mx:Objectlabel="center" />
28. <mx:Objectlabel="right" />
29. </mx:Array>
31. <mx:Arrayid="tabBarDP">
32. <mx:Objectlabel="Red" />
33. <mx:Objectlabel="Orange" />
34. <mx:Objectlabel="Yellow" />
35. <mx:Objectlabel="Green" />
36. <mx:Objectlabel="Blue" />
37. </mx:Array>
39. <mx:ApplicationControlBardock="true">
40. <mx:FormstyleName="plain">
41. <mx:FormItemlabel="textAlign:">
42. <mx:ComboBoxid="comboBox"
43. dataProvider="{comboBoxDP}"
44. selectedIndex="1"
45. change="comboBox_change(event);"/>
46. </mx:FormItem>
47. </mx:Form>
48. </mx:ApplicationControlBar>
50. <mx:TabBarid="tabBar"
51. dataProvider="{tabBarDP}"
52. tabWidth="120"
53. tabStyleName="customTabStyleName"/>
55. </mx:Application>