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