Ext的form功能是无穷的。按键监听，校验，错误提示和值约束只需要做下简单配置就可以了。根据需要扩展form选项也是很容易的。你要先熟悉一些主要的form控件。
- Ext.form.FormPanel：多个的field可以放在一个panel里，就像html里需要一个form标签一样。
- Ext.form.Field：form里的主要用作创建和交互的控件，就像是html里的input标签。
我们先来建一个有多种输入类型的form ，还包括了日期选择控件，校验，错误提示，而且是ajax异步提交的。
这个例子，我们的输入框是用配置的，而不是实例化后的控件。这样编写简单而且运行速度也快。一个标准的页面，ext的包也都要导进来，我们的方法也要写在onReady函数里。
<script>
Ext.onReady(function(){//copyright guoyiqi
var movie_form = new Ext.FormPanel({
url: 'movie_forms_ubmit.jsp',
renderTo: document.body,
frame: true,
title: '电影信息',
width: 280,
items: [{
xtype: 'textfield',
fieldLabel: '电影名',
name: 'title'
},{
xtype: 'textfield',
fieldLabel: '导演',
name: 'director'
},{
xtype: 'datefield',
fieldLabel: '上映日期',
name: 'released',
width:120
}]
});
});
</script>
在浏览器预览，可以看到以下界面
FormPanel跟html的form非常像，都是用来包含表单项的。在FormPanel里有个url的配置属性，当表单提交时，它就知道要把数据发送到哪里了。同时它也有个renderTo的配置属性，这样就能把表单显示到页面的相应位置。Items的配置属性非常重要，它包含了所有的表单项。Items配置的是个数组类型的表单项，每个表单项用一个xtype属性来定义该表单项的类型：文本，日期或数字。甚至可以是表格或其他的Ext控件。
表单项的类型有以下一些：
Textfield
Timefield
Numberfield
Datefield
Combo
Textarea
先来看例子中的第一个表单项
{
xtype: 'textfield',//配置表单项类型
fieldLabel: '电影名',//显示在左边的文本标签，当然也可以设置成在右边或上边
name: 'title'//和html一样，发送到服务器端的变量名
}
Ext中的表单项和html中的表单项基本上是一致的，因为Ext 是用于Web的。
校验
当用户操作不当时，我们应该要给出错误提示。让我们在上面的例子里加入校验吧。最常见的校验是检查用户是否输入了值。我们就用在电影名这个表单项上吧。把它设成必填项。
{
xtype: 'textfield',
fieldLabel: '电影名',
name: 'title',
allowBlank: false
}
加上个allowBlank: false，这是很容易的。默认情况下为true.
有些表单项的校验可能会很特殊，如日期，下面的代码限制了只能填入星期六和星期日。
{
xtype: 'datefield',
fieldLabel: '上映日期',
name: 'released',
width:120,
disabledDays: [1,2,3,4,5]
}
要记得星期是从0开始代表星期日，6结束代表星期六。
当然我们还可以设置数字校验，小数位数等，相关配置可以查看API.
更复杂的校验是vtype。它可以校验限制用户的输入，并且提示错误信息。你可以用它来校验你能想到的任何场景，因为它是用正则表达式来设置的。
已经有一些内置的vtypes可以用了：
url
alpha
alphanum
这些内置的vtypes简单易用，并可以用它们来创建自己的vtype。
我们在导演这个表单项加入vtype限制，只能输入字母。
{
xtype: 'textfield',
fieldLabel: '导演',
name: 'director',
vtype: 'alpha'
}
这个例子我们可以看到内建的vtype很基础，表单项的导演就只能输入字母，输入中文就用红色波浪形给出提示了。
错误信息提示
默认情况下，表单项验证不通过时是以红色波浪形给出提示，和微软的word对语法的错误校验提示一样。我们还可以在ext 中设置其它的错误提示方式。
一种比较好的方式是除了给出红色波浪形，当鼠标移到表单项上时，弹出提示框信息。我们只需要在表单创建之前加入一条语句就 可以了。
Ext.onReady(function(){
Ext.QuickTips.init();
// our form here
});
创建自己的vtype
如果你也像我一样看到正则表达式就头大，我总是先找一些类似的然后做些修改，而不是从头写起。http://guoyiqi.iteye.com
要创建我们自己的vtype,就要在vtype的定义中添加。每个定义包括值，掩码，错误信息和测试用的函数。
我们对导演名进行校验，只能包含字符和空格，第一个字母大写。
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/;//校验的值
Ext.form.VTypes['nameMask'] = /[A-Za-z\- ]/;//限制输入
Ext.form.VTypes['nameText'] = '名字格式有误';//错误信息
Ext.form.VTypes['name'] = function(v){//测试函数
return Ext.form.VTypes['nameVal'].test(v);
}
var movie_form = new Ext.FormPanel({
url: 'movie_forms_ubmit.jsp',
renderTo: document.body,
frame: true,
title: '电影信息',
width: 280,
items: [{
xtype: 'textfield',
fieldLabel: '电影名',
name: 'title',
allowBlank: false
},{
xtype: 'textfield',
fieldLabel: '导演',
name: 'director',
vtype: 'name'
},{
xtype: 'datefield',
fieldLabel: '上映日期',
name: 'released',
width:120,
disabledDays: [1,2,3,4,5]
}]
});
});
</script>
掩码可以限制输入，如只允许数字或是字母。因为用正则表达式做设置，所以可以过滤掉任何按键。举个例子copy right guoyiqi 2009
maskRe: /[A-Z]/
可以输入任意长度字母串。
也可以用vtype来做限制。如果格式变来变去，就应该做成容易修改的代码。如果你的boss过来跟你说，上次我们的数字保留的是10位，现在我们可不可以改成8位。这时我们只需要改下vtype 就可以了。
Radio buttons and check boxes
单选和多选框
单选框和多选框真是很难用的恶魔。我只在毫无选择的情况下才会使用它们。
我们现在表单里加入单选框。
{
xtype: 'radio',
fieldLabel: 'Filmed In',
name: 'filmed_in',
boxLabel: 'Color'
},{
xtype: 'radio',
hideLabel: false,
labelSeparator: '',
name: 'filmed_in',
boxLabel: 'Black & White'
}
他们和html的单选框很像，给了相同的名字就可以设成一组。我们设置第一个radio的标签，其余的没有设置。
默认情况下标签以：隔开，如图
如果隐藏了标签，
都影响了视觉效果，所以设置了hideLabel: false,
labelSeparator: '',将：替换成空。
有时我们要用到多选框来设置布尔类型-开或关的两个状态值。
{
xtype: 'checkbox',
fieldLabel: '是否好电影',
name: 'good_movie'
}
在firefox浏览器的效果出不来，如图 http://www.cnblogs.com/dairongle/
在html的表单中，组合框或叫选择框或叫下拉框是很常用的。Ext的组合框是很实用的。
我们先来试一下组合框的数据取自本地。我们需要建一个data store。Data store有很多种类，这里用一个简单的。
