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

By Minidxer | June 7, 2008

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

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

下面是完整代码(或点击这里查看)：

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function comboBox_change(evt:ListEvent):void {
var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTextAlignLabel");
cssObj.setStyle("textAlign", evt.currentTarget.selectedItem);
}
]]>
</mx:Script>
<mx:Style>
FormItem {
labelStyleName: customTextAlignLabel;
}
.customTextAlignLabel {
textAlign: left;
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="textAlign:">
<mx:ComboBox id="comboBox"
dataProvider="[left,center,right]"
change="comboBox_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Form>
<mx:FormItem label="Button">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="ButtonBar">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="CheckBox">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="ColorPicker">
<mx:TextInput />
</mx:FormItem>
<mx:FormItem label="ComboBox">
<mx:TextInput />
</mx:FormItem>
</mx:Form>
</mx:Application>

代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: Form, FormItem, labelStyleName, textAlign, 文本对齐

中文Flex例子