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]-->
|
