ExtJS学习心得（三）
这里主要讲一下表单的应用：）
一、美化表单：
ExtJS自带的CSS效果可以让表单非常漂亮，
如果你觉自带的这些效果不够漂亮，可以到本站的资源下载专区，下载其他皮肤.
下载地址： [url=http://www.extjs.org.cn/index.php?q=download/]
在使用前先将ext-all.css文件导入页面，然后加入以下代码
01.
<div class="x-box-ml">
02.
<div class="x-box-mr">
03.
<div class="x-box-mc">
04.
<form id="regform">
05.
<fieldset align="middle">
06.
<legend><font class="btitle" color="#ff7300">
07.
<strong class="style7">帐号信息</strong></font></legend>
08.
<table width="100%" align="center">
09.
<tr>
10.
<td style="text-align: right">
11.
会员Email
12.
</td>
13.
<td style="text-align: left" width="300">
14.
<input type="text" id="UserEmail" name="UserEmail" />
15.
<span id="msg" style="display: none"></span>
16.
</td>
17.
</tr>
18.
<tr>
19.
<td style="text-align: right">
20.
登录密码
21.
</td>
22.
<td style="text-align: left">
23.
<input id="UserPwd" name="UserPwd" type="password" />
24.
</td>
25.
</tr>
26.
<tr>
27.
<td style="text-align: right">
28.
密码确认
29.
</td>
30.
<td style="text-align: left">
31.
<input id="UserPwd1" name="UserPwd1" type="password" />
32.
</td>
33.
</tr>
34.
</table>
35.
</fieldset>
36.
<div id="regbutton">
37.
</div>
38.
</form>
39.
</div>
40.
</div>
41.
</div>
42.
<div class="x-box-bl">
43.
<div class="x-box-br">
44.
<div class="x-box-bc">
45.
</div>
46.
</div>
47.
</div>
二、绑定及验证表单：
以上只是将表单显示出来了，如需对表单域操作，还需要在JS里写相关的代码进行绑定
01.
var fm2 = new Ext.form.BasicForm('regform');
02.
//加入验证框
03.
fm2.add(new Ext.form.TextField({
04.
allowBlank: false,//不能为空
05.
blankText:'EMAIL不能为空，且请确保有效地址！',
06.
//regex:re,//正则验证
07.
invalidText:'EMAIL格式不正确或此EMAIL已被注册！',
08.
validator:checkEmail//自定义验证函数
09.
}).applyTo(userEmail));
10.
11.
fm2.add(new Ext.form.TextField({
12.
allowBlank: false,//不能为空
13.
blankText:'密码不能为空！'
14.
}).applyTo(Ext.get('UserPwd')));
15.
16.
fm2.add(new Ext.form.TextField({
17.
allowBlank: false,//不能为空
18.
blankText:'密码不能为空！',
19.
invalidText:'2次密码不相同！',
20.
validator:vailda//自定义验证函数
21.
}).applyTo(Ext.get('UserPwd1')));
22.
23.
fm2.add(new Ext.form.TextField({
24.
allowBlank: false,//不能为空
25.
blankText:'会员名称不能为空！'
26.
}).applyTo('CustomerName'));
ExtJS能对表单进行非常灵活的验证，上面是将表单的字段绑定起来，同时添加了相应的验证，并且也支持自定义函数验证，以下是对比2个输入框密码是否相同的自定义函数
01.
/**
02.
* 验证密码是否相同
03.
*/
04.
function vailda()
05.
{
06.
if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
07.
return true;
08.
else
09.
return false;
10.
}
如果想让效果更好，还要在绑定代码里加多一句
1.
Ext.QuickTips.init();
加入此代码后，表单验证的错误消息会在鼠标放到相应字段时显示出来
三、表单提交：
先将提交按钮进行注册，然后再对此按钮进行操作
01.
//注册按钮
02.
Ext.get('regform').un("submit", fm2.onSubmit, fm2);
03.
var regButton = new Ext.Button('regbutton', {
04.
text: ' 注 册 ',
05.
handler: function(){
06.
if (fm2.isValid()) {
07.
Ext.Msg.show({
08.
title:'再确认一下',
09.
modal : false,
10.
msg: '您确定资料正确吗?',
11.
buttons: Ext.Msg.OKCANCEL,
12.
fn: function(btn, text){
13.
if (btn == 'ok'){
14.
fm2.submit({
15.
url: 'Register.htm',
16.
params: {
17.
oper: 'submit'
18.
},
19.
msgethod: 'POST',
20.
waitMsg:'正在提交,请稍等'
21.
});
22.
}
23.
},
24.
animEl: 'regbutton'
25.
}).getDialog().moveTo(200, 100);
26.
} else {
27.
Ext.Msg.show({
28.
title:'信息',
29.
msg: '请填写完整后再提交!',
30.
modal : false,
31.
buttons: Ext.Msg.OK
32.
}).getDialog().moveTo(200, 100);
33.
}
34.
}
35.
});
36.
fm2.on({
37.
//提交之前
38.
beforeaction: function(form, action){
39.
regButton.disable();
40.
},
41.
//提交完成后
42.
actioncomplete: function(form, action){
43.
if(action.type == 'submit'){
44.
regButton.enable();
45.
}
46.
if(action.result.success){
47.
Cookies.set('Allcard_userName', Ext.get('CustomerName').dom.value);
48.
Ext.Msg.show({
49.
title:'成功',
50.
msg: '恭喜,您已注册成功!',
51.
modal : false,
52.
fn: showResult,
53.
buttons: Ext.Msg.OK
54.
}).getDialog().moveTo(200, 100);
55.
}
56.
else{
57.
Ext.Msg.show({
58.
title:'错误',
59.
msg: '抱歉！您注册失败，请联系管理员!',
60.
modal : false,
61.
buttons: Ext.Msg.OK
62.
}).getDialog().moveTo(200, 100);
63.
}
64.
},
65.
//提交失败后
66.
actionfailed: function(form, action){
67.
regButton.enable();
68.
}
69.
});
