ExtJS学习心得（三）

这里主要讲一下表单的应用：）

一、美化表单：
ExtJS自带的CSS效果可以让表单非常漂亮，在使用前先将ext-all.css文件导入页面，然后加入以下代码

< div class ="x-box-ml" >
< div class ="x-box-mr" >
< div class ="x-box-mc" >
< form id ="regform" >
< fieldset align ="middle" >
< legend >< font class ="btitle" color ="#ff7300" >< strong class ="style7" > 帐号信息 </ strong ></ font ></ legend >
< table width ="100%" align ="center" >
< tr >
< td style ="text-align: right" >
会员Email：
</ td >
< td style ="text-align: left" width ="300" >
< input type ="text" id ="UserEmail" name ="UserEmail" /> < span id ="msg" style ="display: none" ></ span >
</ td >
</ tr >
< tr >
< td style ="text-align: right" >
登录密码：
</ td >
< td style ="text-align: left" >
< input id ="UserPwd" name ="UserPwd" type ="password" />
</ td >
</ tr >
< tr >
< td style ="text-align: right" >
密码确认：
</ td >
< td style ="text-align: left" >
< input id ="UserPwd1" name ="UserPwd1" type ="password" />
</ td >
</ tr >
</ table >
</ fieldset >
< div id ="regbutton" >
</ div >
</ form >
</ div >
</ div >
</ div >
< div class ="x-box-bl" >
< div class ="x-box-br" >
< div class ="x-box-bc" >
</ div >
</ div >
</ div >

二、绑定及验证表单：

以上只是将表单显示出来了，如需对表单域操作，还需要在JS里写相关的代码进行绑定

var fm2 = new Ext.form.BasicForm( ' regform ' );
// 加入验证框
fm2.add( new Ext.form.TextField( ... {
allowBlank: false,//不能为空
blankText:'EMAIL不能为空，且请确保有效地址！',
//regex:re,//正则验证
invalidText:'EMAIL格式不正确或此EMAIL已被注册！',
validator:checkEmail//自定义验证函数
} ).applyTo(userEmail));

fm2.add( new Ext.form.TextField( ... {
allowBlank: false,//不能为空
blankText:'密码不能为空！'
} ).applyTo(Ext.get( ' UserPwd ' )));

fm2.add( new Ext.form.TextField( ... {
allowBlank: false,//不能为空
blankText:'密码不能为空！',
invalidText:'2次密码不相同！',
validator:vailda//自定义验证函数
} ).applyTo(Ext.get( ' UserPwd1 ' )));

fm2.add( new Ext.form.TextField( ... {
allowBlank: false,//不能为空
blankText:'会员名称不能为空！'
} ).applyTo( ' CustomerName ' ));

ExtJS能对表单进行非常灵活的验证，上面是将表单的字段绑定起来，同时添加了相应的验证，并且也支持自定义函数验证，以下是对比2个输入框密码是否相同的自定义函数

/**/ /**/ /**/ /**
* 验证密码是否相同
*/
function vailda()
... {
if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
return true;
else
return false;
}

如果想让效果更好，还要在绑定代码里加多一句

Ext.QuickTips.init();

加入此代码后，表单验证的错误消息会在鼠标放到相应字段时显示出来

三、表单提交：

先将提交按钮进行注册，然后再对此按钮进行操作

// 注册按钮
Ext.get( ' regform ' ).un( " submit " , fm2.onSubmit, fm2);
var regButton = new Ext.Button( ' regbutton ' , ... {
text: ' 注 册 ',
handler: function()...{
if (fm2.isValid()) ...{
Ext.Msg.show(...{
title:'再确认一下',
modal : false,
msg: '您确定资料正确吗?',
buttons: Ext.Msg.OKCANCEL,
fn: function(btn, text)...{
if (btn == 'ok')...{
fm2.submit(...{
url: 'Register.htm',
params: ...{
oper: 'submit'
},
msgethod: 'POST',
waitMsg:'正在提交,请稍等'
});
}
},
animEl: 'regbutton'
}).getDialog().moveTo(200, 100);
} else ...{
Ext.Msg.show(...{
title:'信息',
msg: '请填写完整后再提交!',
modal : false,
buttons: Ext.Msg.OK
}).getDialog().moveTo(200, 100);
}
}
} );
fm2.on( ... {
//提交之前
beforeaction: function(form, action)...{
regButton.disable();
},
//提交完成后
actioncomplete: function(form, action)...{
if(action.type == 'submit')...{
regButton.enable();
}
if(action.result.success)...{
Cookies.set('Allcard_userName', Ext.get('CustomerName').dom.value);
Ext.Msg.show(...{
title:'成功',
msg: '恭喜,您已注册成功!',
modal : false,
fn: showResult,
buttons: Ext.Msg.OK
}).getDialog().moveTo(200, 100);
}
else...{
Ext.Msg.show(...{
title:'错误',
msg: '抱歉！您注册失败，请联系管理员!',
modal : false,
buttons: Ext.Msg.OK
}).getDialog().moveTo(200, 100);
}
},
//提交失败后
actionfailed: function(form, action)...{
regButton.enable();
}
} );

其中waitMsg即指定提交时loading的文字，animEl则绑定提交按钮的特效，在fm2.on里就写表单提交前后的相应事件，表单的事件基本上就写完了，剩下的就是后台处理方法，我上一篇已有说明，在此就不再说了