这里主要讲一下表单的应用:)
一、美化表单:
ExtJS自带的CSS效果可以让表单非常漂亮,
如果你觉自带的这些效果不够漂亮,可以到本站的资源下载专区,下载其他皮肤.
下载地址: [url=http://www.extjs.org.cn/index.php?q=download/]
在使用前先将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里就写表单提交前后的相应事件,表单的事件基本上就写完了,剩下的就是后台处理方法,我上一篇已有说明,在此就不再说了
该系列文章引用自:
winson的博客天空
http://www.cnblogs.com/winsonet/