Ext.FormPanel

Ext2.0 的 form 不单增加了时间输入控件、隐藏输入控件，还修改了创建方法 ，通过 formpanel 代替了原来 form ， column 也根据新的布局定义更新了定义方式。总体来说，定义一个 form 更简单便捷了。本文将通过一个实例介绍一下 2.0 的 form 的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！

在创建一个 form 之前，我们先增加以下语句：

  Ext .QuickTips.init();

  Ext.form.Field.prototype.msgTarget = 'side';

第一句的目的是为需要的元件提供提示信息功能， form 的主要提示信息就是客户端验证的错误信息了。

第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有：

位置值	描述
qtip	当鼠标移动到控件上面时显示提示
title	在浏览器的标题显示，但是测试结果是和 qtip 一样的
under	在控件的底下显示错误提示
side	在控件右边显示一个错误图标，鼠标指向图标时显示错误提示
[element id]	错误提示显示在指定 id 的 HTML 元件中

这个大家可以根据各人喜好设置，我习惯使用“ side ”，这里有一点要注意的，就是注意控制控件的宽度，以防不够宽度显示错误图标，这个下面会说到。

好了，现在创建我们的 form ， 2.0 的方法就是直接创建一个 formpanel ：

 

var simpleForm = new Ext.FormPanel({

    labelAlign: 'left',

    title: ' 表单例子 ',

    buttonAlign:'right',

    bodyStyle:'padding:5px',

    width: 600,

    frame:true,

    labelWidth:80,

items: [],

buttons: []

});

simpleForm.render(document.body);

在 formpanle 里，我们定义了 form 控件的标题是在左边的（ labelAlign: 'left' ）； form 的标题栏显示标题“表单的例子”；

它的按钮位置是在右对齐的（ buttonAlign:'right' ）；

边的类型设置了内补丁 5px （ bodyStyle:'padding:5px' ）；

总宽度是 600px ；设置了面板的边角是圆弧过度的（ frame:true ），

我设置这个属性主要目的不是因为边角，而是因为背景，如果不设置这个，背景颜色将为白色，设置了这个将会加入海蓝色的背景图，好看点；

还设置了 form 控件的标题宽度是 80px （ labelWidth:80 ）。还有一些其它的设置选项，我这里就不多说，大家可以参看 2.0 的 API 。

items 数组的设置是我们的重点了， form 上的所有控件都是在这里设置的。

从 form 的结构图中看到， form 整体上是分了两列的（实际上不是的，呵呵）。因为要分列，所以要使用 columnLayout 类。在使用 columnLayout 类之前，我们需要了解一下 CSS 中 float 属性的作用，改属性主要作用是设置对象 是否及如何浮动，属性值为 none 、 left 和 right 三个。 column 设置是 left ，意思就是对象浮在左边的。那这个有什么作用呢？其实这个和我们在 word 中输入文字，默认文字是左对齐的，当一行文字的宽度超过页面的宽度时将自动换行是一样的。 我们通过一个例子来说明一下。

首先我们定义一个 div ，背景色是黑色，宽度和高度都是 200 ：

  <div style='background:black;width:200px;height:200px;'>

       </div>

然后在里面加入 2 个 div ，每个宽度和高度都是 200 ，背景色一个是红色，一个是绿色：

       <div style='background:black;width:200px;height:200px;'>

              <div style='background:red;width:50px;height:50px;'></div>

              <div style='background:green;width:50px;height:50px;'></div>

       </div>

我们来看看效果：

<!--[if !vml]-->
<!--[endif]-->

在没有使用
float
之前，两个子
div
是分别各占一行的。好，现在我们在两个子
div
中加入“
float:left
”在看看效果：



 

  <div style='background:black;width:200px;height:200px;'>


             
<div style='background:red;width:50px;height:50px;float:left;'></div>



             
<div style='background:green;width:50px;height:50px;float:left;'></div>



      
</div>



 

 



<!--[if !vml]-->
<!--[endif]-->


两个子
div
出现在同一行了。我们复制一下两个子
div
，粘贴两次，然后看看效果：





      
<div style='background:black;width:200px;height:200px;'>


             
<div style='background:red;width:50px;height:50px;float:left;'></div>


             
<div style='background:green;width:50px;height:50px;float:left;'></div>


             
<div style='background:red;width:50px;height:50px;float:left;'></div>


             
<div style='background:green;width:50px;height:50px;float:left;'></div>


             
<div style='background:red;width:50px;height:50px;float:left;'></div>


             
<div style='background:green;width:50px;height:50px;float:left;'></div>


      
</div>



 

 



<!--[if !vml]-->
<!--[endif]-->


6
个子
div
有序的按左对齐方式排列在一起了，当一行的子
div
的宽度超过了父
div
的宽度时，子
div
自动换行到了第二行。



不知道大家是否看得明白？看不明白自己再动手改变一下子
div
的宽度和高度，看看效果。
column
的工作


方式就是这样的