Flex个人知识库(六)Form左对齐

Flex个人知识库(6)Form左对齐
[size=large]1、今天在调整Flex中的Form lable居左显示时碰到了搜索的问题：
   <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

        s|FormItem s|Label#labelDisplay {
            textAlign: right;
        }
    </fx:Style>

先是搜索”Flex FormItem Itemlable居左显示“找到了Flex Examples
然后再通过Examples中的关键词来确定了我搜索FLex4的关键词
   Flex3解决方式：

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ -->
<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>

Flex4的实现求解中... ...

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_FormItem_labelDisplay_textAlign_test"
			   xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	<s:layout>
		<s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
	</s:layout>
	
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
	
		mx|FormItemLabel
		{
			textAlign: left;
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
		]]>
	</fx:Script>
	
	<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>
	
</s:Application>

找到更好的解决办法，直接在css文件中设置：

mx|FormItemLabel
{
	textAlign:     left;
	font-size:	   14;
	font-weight:   bold;
	left:          0;
	padding-left:  -5;
}

即可，当然也可以如此设置了：

  mx|FormItem {
            labelStyleName: customTextAlignLabel;
        }

        .customTextAlignLabel {
            textAlign: left;
        }

注意：在Flex4的组件中使用<fx:style></style>的形式设置类型选择器的样式无效，在application中有效。因此在组件中使用类型选择器时应该在外部css文件中设置然后再把它导入到需要的地方。

2、 Flex画分割线

<s:Line width="100%" height="2">
					<s:stroke>
						<s:SolidColorStroke color="#0b8ff4" weight="1"/>
					</s:stroke>
				</s:Line>

... ... [/size]

Flex个人知识库(六)Form左对齐

相关推荐