第四行的两个输入框主要是测试通过 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 控件,希望大家能从中获得收益。如果有什么疑问和建议,请联系我。多谢!