代码改变世界

ExtJS学习心得(三)

2007-10-30 09:59  w i n s o n  阅读(9852)  评论(10编辑  收藏  举报
这里主要讲一下表单的应用:)

一、美化表单:
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(200100);
                        }
 else {
                            Ext.Msg.show(
{
                           title:'信息',
                           msg: '请填写完整后再提交
!',
                           modal : 
false,
                           buttons: Ext.Msg.OK
                            }
).getDialog().moveTo(200100);
                        }

                      }
 
                }
);
                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(200100);    
                        }

                        
else{
                        Ext.Msg.show(
{
                           title:'错误',
                           msg: '抱歉!您注册失败,请联系管理员
!',
                           modal : 
false,
                           buttons: Ext.Msg.OK
                        }
).getDialog().moveTo(200100);
                        }
            
                    }
,
                    
//提交失败后
                    actionfailed: function(form, action){
                        regButton.enable();
                    }

                }
);

其中waitMsg即指定提交时loading的文字,animEl则绑定提交按钮的特效,在fm2.on里就写表单提交前后的相应事件,表单的事件基本上就写完了,剩下的就是后台处理方法,我上一篇已有说明,在此就不再说了