• 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.
  • 相关阅读:
    Tomcat、Jetty、Undertow、Netty 等容器的区别
    Spring boot整合Swagger2接口文档使用
    为项目配置了Bean,结果Spring Boot并没有扫描到
    yum安装软件所在目录的查询
    LINUX云服务器 安装 nginx
    Cause: org.jetbrains.plugins.gradle.tooling.util.ModuleComponentIdentifierIm Lorg/gradle/api/artifacts/ModuleIdentifier;
    redis数据结构
    linux安装redis
    eclipse项目目录展示结构设置
    tomcat 搭建以及发布配置
  • 原文地址:https://www.cnblogs.com/4kapple/p/1860656.html
Copyright © 2020-2023  润新知