ExtJS学习心得（三）

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

一、美化表单：

ExtJS自带的CSS效果可以让表单非常漂亮，

如果你觉自带的这些效果不够漂亮，可以到本站的资源下载专区，下载其他皮肤.

下载地址：

在使用前先将ext-all.css文件导入页面，然后加入以下代码

[url=http://extjs.org.cn/node/61#]view plain
copy to clipboard
print
?

<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>

<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里写相关的代码进行绑定

view plain
copy to clipboard
print
?

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'
));

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个输入框密码是否相同的自定义函数

view plain
copy to clipboard
print
?

/**

* 验证密码是否相同

*/

function
vailda()

{

if
(Ext.get(
'UserPwd'
).dom.value==Ext.get(
'UserPwd1'
).dom.value)

return

true
;

else

return

false
;

}

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

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

view plain
copy to clipboard
print
?

Ext.QuickTips.init();

Ext.QuickTips.init();

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

三、表单提交：

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

view plain
copy to clipboard
print
?

//注册按钮

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();

}

});

//注册按钮
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里就写表单提交前后的相应事件，表单的事件基本上就写完了，剩下的就是后台处理方法，我上一篇已有说明，在此就不再说了

该系列文章引用自：

winson的博客天空

http://www.cnblogs.com/winsonet/