本文详细介绍了ExtJS框架中表单控件的使用方法，包括不同类型的输入验证、tabpanel的配置以及如何实现自定义的时间输入控件。同时探讨了如何进行表单提交及数据验证。
第四行的两个输入框主要是测试通过 vtypes 属性来验证输入框的输入的：
{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: ' 电子邮件 ',
name: 'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: ' 个人主页 ',
name: 'url',
vtype:'url',
anchor:'90%'
}]
}]
}
这里的定义和普通的文本输入框没什么区别，只是多了一个 vtypes 的属性定义。 Vtypes 里总共定义了 email 、 url 、 alpha 和 alphanum 四种类型数据格式， email 和 url 这个不用介绍了，呵呵。 alpha 是字母和下划线的组合， alphanum 是字母、下划线和数字的组合。
下面要加入一个 tabpanel ，加入 3 个 tab 页。
{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[]
}
要注意的是，这个 tabpanel 不是在上面 coulmn 的 items 里加的，因为不在 column 里。我们加在 formpanel 里。把 item 类型设置为 'tabpanel' 就行了，然后将标签页头的背景设置为透明的（ plain:true ），当前活动 的标签页是第一页（ activeTab: 0 ），高度设置为 235px （ height:235 ）， tab 页的面板使用内补丁 10px （ defaults:{bodyStyle:'padding:10px'} ）。
好了，现在在 tabpanel 的 items 加入标签页。第一页主要有两个输入控件，一个是 vtypes 类型 alphanum 的登录输入框和一个密码输入框。
{
title:' 登录信息 ',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: ' 登录名 ',
name: 'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
},{
inputType:'password',
fieldLabel: ' 密码 ',
name: 'password',
allowBlank:false
}]
}
在标签定义了，设置了标签标题是登录信息（ title:' 登录信息 ' ），控件容器是 formlayout （ layout:'form' ），控件的默认宽度是 230px （ defaults: {width: 230} ），默认控件类型是 textfield （ defaultType: 'textfield' ）。
两个控件的定义与前面的 textfield 定义没什么区别，只是密码输入框需要定义 input 控件的类型为 password （ inputType:'password' ）。两个控件都不允许为空（ allowBlank:false ）。
第二个标签页里有 numberfield 、 timefield 和 textfield 三个控件：
{
title:' 数字时间字母 ',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
xtype:'numberfield',
fieldLabel: ' 数字 ',
name: 'number'
},{
xtype:'timefield',
fieldLabel: ' 时间 ',
name: 'time'
},{
fieldLabel: ' 纯字母 ',
name: 'char',
vtype:'alpha'
}]
}
Numberfield 顾名思义就是只能输入数字的输入控件。在该例子，没做最大值、最小值任何限制，如果要设置最大值和最小值，分别设置 maxValue 和 minValue 两个属性就行了。如果要设置数字输入长度，例如身份证号码，可以设置 maxLength 和 minLength 两个属性。可以通过设置 maxText 、 minText 、 maxLengthText 和 minLengthText 设置各自的验证出错信息。可通过 allowDecimals 属性设置是否只允许输入整型值，默认值是 true ，允许输入浮点数。设置 allowNegative 设置是否只允许输入正数，默认值是 true ，允许输入正负数。通过 decimalPrecision 属性可设置小数点后的位数，默认值是 2 位。
timefield 是新增加的时间输入控件，起弥补日期输入控件不能输入时间的作用。它的定义也很简单，设置类型为 timefield 就行了。 timefield 默认时间格式是 12 小时制的，我们可通过修改 format 属性来修改其数据格式。通过设置 increment 属性可设置下拉选择值得时间区间，默认值是 15 分钟的。还可以和数字输入控件一样设置最大值和最小值。下拉的设置和 combobox 是一样的。
在目前的版本中， timefield 类还没有汉化，所以我们要在本地文件中加入 timefield 的汉化定义：
if(Ext .form.TimeField){
Ext.apply(Ext.form.TimeField.prototype, {
format:'G:i:s',
minText : " 该输入项的时间必须大于或等于： {0}",
maxText : " 该输入项的时间必须小于或等于： {0}",
invalidText : "{0} 不是有效的时间 ",
});
}
在这里，我默认定义了时间格式是 24 小时制的，小时为个位数是不加前缀 0 。
最后一个加入的是测试纯字母输入的，和 email 等是一样的，我就不介绍了。
在最后一个 tab 页中加入了一个 textarea 输入
{
title:' 文本区域 ',
layout:'fit',
items: {
xtype:'textarea',
id:'area',
fieldLabel:''
}
}
最后一步就是为 form 添加按钮了，在 formpanel 的 buttons 属性中我们加入了一个保存按钮和取消按钮：
buttons: [{
text: ' 保存 ',
handler:function(){
if(simpleForm.form.isValid()){
this.disabled=true;
simpleForm.form.doAction('submit',{
url:'test.asp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert(' 操作 ',action.result.data); this.disabled=false;
},
failure:function(){
Ext.Msg.alert(' 操作 ',' 保存失败！ ');
this.disabled=false;
}
});
}
}
},{
text: ' 取消 ',
handler:function(){simpleForm.form.reset();}
}]
在 formpanel 类中， form 属性指向的是 formpanle 里的 basicform 对象 ，我们可通过 formpanle.form 来使用该 basicform 对象。在被例子，我们已经将 formpanel 对象赋值给了 simpleForm 这个变量，所以我们可以通过 simpleForm.form 访问面板里的 basicform 对象。
在 buttons 里定义的按钮默认是 Ext.Button ，所以按钮的属性定义可以查看 Ext.Button 的 API 。在这里两个按钮都没用到其它属性，只是设置了显示文本（ text ）和单击事件。
保存按钮要做的就是先做 basicform 的客户端验证（ simpleForm.form.isValid() ），验证通过了则设置该按钮状态为 disable ，防止 2 次提交。然后调用 simpleForm.form.doAction 方法 提交数据。 doAction 方法的第一个参数“ submit ”的意思是表示执行的是提交操作，提交的后台页面是 test.asp （ url:'test.asp' ），提交方式是 post （ method:'post' ），没有其它提交参数（ params:'' ），提交成功后执行 success 定义的函数，本例只是显示一个保存成功信息。后台返回的数据格式是需要我们注意的，一定要json格式，而且必须包含“ success:true”，不然不会执行 success定义的函数。 success 定义的函数返回两个参数，第一是 form 本身，第二个是 ajax 返回的响应结果，在 action.result 这个 json 数组了保存了后台返回的数据。例如本例后台返回的 json 结构是“ {success:true,data:~~~} ”，其中 data 部分我将提交的数据将字段名和数据组合成一个字符串。在 success 函数中，我通过“ Ext.Msg.alert(' 操作 ',action.result.data); ”将 data 数据显示出来。我们还定义 failure 函数，就是网络通讯存在问题的时候将显示错误信息。
取消按钮就是简单的 reset 一下 form 的控件。
如果想 form 按以前的老办法提交，可以在 formpanel 的定义中加入一下设置：
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
}
第一个设置的目的是取消 formpanel 的默认提交函数。第二就是设置新的提交方式为旧方式提交。
至此，我们已经简单的学习 一次 2.0 版中的 form 控件，希望大家能从中获得收益。如果有什么疑问和建议，请联系我。多谢！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
