这里主要讲一下表单的应用:)
一、美化表单:
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里就写表单提交前后的相应事件,表单的事件基本上就写完了,剩下的就是后台处理方法,我上一篇已有说明,在此就不再说了
一、美化表单:
ExtJS自带的CSS效果可以让表单非常漂亮,在使用前先将ext-all.css文件导入页面,然后加入以下代码
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
二、绑定及验证表单:
以上只是将表单显示出来了,如需对表单域操作,还需要在JS里写相关的代码进行绑定
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
ExtJS能对表单进行非常灵活的验证,上面是将表单的字段绑定起来,同时添加了相应的验证,并且也支持自定义函数验证,以下是对比2个输入框密码是否相同的自定义函数
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
如果想让效果更好,还要在绑定代码里加多一句
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
加入此代码后,表单验证的错误消息会在鼠标放到相应字段时显示出来
三、表单提交:
先将提交按钮进行注册,然后再对此按钮进行操作
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/None.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/InBlock.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
![](http://bbs.szblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
其中waitMsg即指定提交时loading的文字,animEl则绑定提交按钮的特效,在fm2.on里就写表单提交前后的相应事件,表单的事件基本上就写完了,剩下的就是后台处理方法,我上一篇已有说明,在此就不再说了