Flex中通过设置textAlign和labelStyleName样式设置FormItem容器中标签文本对齐方式的例子

和前面 Flex中通过设置textAlign和headerStyleName样式设置DateChooser控件头部年月文本对齐方式的例子类似的，接下来的例子演示了Flex中通过设置textAlign和labelStyleName样式，设置FormItem容器中标签文本对齐方式。

让我们先来看一下Demo（可以右键View Source或 点击这里察看源代码 ）：

 

Download: main.mxml

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white">
7.     <mx:Script>
8.         <![CDATA[
9.             import mx.events.ListEvent;
11.             private function comboBox_change(evt:ListEvent):void {
12.                 var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTextAlignLabel");
13.                 cssObj.setStyle("textAlign", evt.currentTarget.selectedItem);
14.             }
15.         ]]>
16.     </mx:Script>
18.     <mx:Style>
19.         FormItem {
20.             labelStyleName: customTextAlignLabel;
21.         }
23.         .customTextAlignLabel {
24.             textAlign: left;
25.         }
26.     </mx:Style>
28.     <mx:ApplicationControlBar dock="true">
29.         <mx:Form styleName="plain">
30.             <mx:FormItem label="textAlign:">
31.                 <mx:ComboBox id="comboBox"
32.                         dataProvider="[left,center,right]"
33.                         change="comboBox_change(event);" />
34.             </mx:FormItem>
35.         </mx:Form>
36.     </mx:ApplicationControlBar>
38.     <mx:Form>
39.         <mx:FormItem label="Button">
40.             <mx:TextInput />
41.         </mx:FormItem>
42.         <mx:FormItem label="ButtonBar">
43.             <mx:TextInput />
44.         </mx:FormItem>
45.         <mx:FormItem label="CheckBox">
46.             <mx:TextInput />
47.         </mx:FormItem>
48.         <mx:FormItem label="ColorPicker">
49.             <mx:TextInput />
50.         </mx:FormItem>
51.         <mx:FormItem label="ComboBox">
52.             <mx:TextInput />
53.         </mx:FormItem>
54.     </mx:Form>
56. </mx:Application>