extjs的css效果及与传统布局结合下的panel的使用及表单提交

  一、美化表单：
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;   
                   }