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