Flex & form小技巧

最近在用Flex配合Net开发程序，自然要经常用到Form这个超级方便的东西了，只要写很少的代码就能实现那些烦人的操作，真的很好~

特别是验证控件，我觉得不错，而且因为我公司开发的是英文版，所以连默认显示的提示语句都不用修改， O(∩_∩)O哈哈~

以下方法让你的form更好用：

1.一行有多个控件

默认是一个label+一个控件，如

<mx:FormItem label="Company registration number">

 <s:TextInput id="tRegNum"/>

</mx:FormItem>

如果要一行多个控件的话，这样写：

<mx:FormItem label="Financial period ended" direction="horizontal">            

 <mx:DateField id="dFin" formatString="DD/MM/YYYY" yearNavigationEnabled="true"/>            

 <s:TextInput id="tRegNum"/>            

</mx:FormItem>

但是这样你会发现控件直接的对齐有问题，默认是水平左对齐，垂直方向top对齐，所以还需要修改：

<mx:FormItem label="Company registration number">

 <mx:FormItem>

  <s:TextInput id="tCompany" width="300"/>

 </mx:FormItem> 

 <mx:FormItem>

  <s:TextInput id="tRegNum"/>

 </mx:FormItem>            

</mx:FormItem>

 

看出有什么不同了么？对了，就是在FormItem里嵌套另外一个FormItem.

看看，现在是不是整齐多了，现在，垂直方向上的对齐ok了，但是发现第一个控件与前面的Label直接有个很大的空隙，这个事FormItem的Label造成的，继续修改：

 

<mx:FormItem label="Financial period ended" direction="horizontal">            

 <mx:DateField id="dFin" formatString="DD/MM/YYYY" yearNavigationEnabled="true"/>            

 <mx:FormItem label="(DD/MM/YYYY)"/>            

</mx:FormItem>

原来把第一个FormItem去掉就好了，直接暴露控件，不过貌似不是很和谐。

呵呵，现在看看你的Form，效果还不错吧。

2.Form的Head

给Form设置一个Head吧，就不需要再将Form嵌套在另外一个Panel中了。

<mx:FormHeading label="Load Word"/>

 

======华丽的分割线 03/Nov/2010 =======

以下内容来自：http://xiejiangbo.javaeye.com/blog/506518

 

Form重点属性：

①Form

1.verticalGap:2;控制同一个Form中两个FormItem之间的垂直距离

②FormItem

1.direction="vertical|horizontal" 控制子项排布为垂直或水平

2.verticalGap：垂直方向上各子项间的像素数目。默认值取决于组件类；

如果未覆盖类的默认值，则默认值为 6。

3.horizontalGap：水平方向上各子项间的像素数目。默认值取决于组件类；

如果未覆盖类的默认值，则默认值为 8。

4.这个属性找得最辛苦，其控制FormItem的lable和子组件之间的间距

indicatorGap：表单项的标签和子组件之间的像素数目。 默认值为 14.