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

liaoshaoyao

[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>
   ... ...