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