学步园

   抱歉各位，由于工作繁忙，很久没有写新文章了，在此感谢各位的支持！

   今天我们介绍的是Ext,作为一个功能强大的Ajax框架Ext拥有华丽的界面可以用在富客户端的开发上，彻底颠覆了人们对js的认识“原来脚本也不是想象中的麻烦”。如今已经有Ext 2.2的版本了。在Ext2.2的版本中添加了许多新的特性，特别是对GMap的支持,获得更多的信息请访问Ext官网、Ext中文社区。下面介绍一个基于Ext2.1进行用户验证注册的例子：

一、主界面设计：

 

                            (图一)

                        (图二)

          (图三)

                        (图四)

           (图五)

以上的五张图就为我们完整的展示了这个例子,接下来我们着重介绍代码部分。

二、代码逻辑设计：

 

  1 <script type="text/javascript" >
  2      Ext.onReady(function(){
  3         Ext.QuickTips.init();
  4         Ext.form.Field.prototype.msgTarget = 'side';
  5         
  6        var IsExsit=false;
  7        var regform=new Ext.form.FormPanel({       
  8                labelWidth:80,
  9                frame:true ,
 10                 monitorValid:true, //进行表单验证
 11                defaultType:'textfield', 
 12                items:[{
 13                  fieldLabel:"用户名",
 14                  id:"txtusername",
 15                  name:"username",
 16                  width:150,
 17                  labelAlign:"right",
 18                  validator :function()
 19                  {
 20                     //本方法亦可以使用下面被注释的部分代替
 21                  var username = Ext.get('username').dom.value;
 22                  Ext.Ajax.request({
 23                     url:'CheckUserName.aspx',
 24                     params:{name:username},
 25                     success: function(response, options) {            
 26                        var data = Ext.util.JSON.decode(response.responseText);             
 27                        if(data.success == true)  ReturnValue(true);
 28                        else ReturnValue(false);//不能在success方法里面直接返回。
 29                     }  
 30                 });
 31                function ReturnValue(ok){
 32               IsExsit = ok;
 33             }
 34             return IsExsit; 
 35                  },
 36                  invalidText:"用户已经存在",
 37                  emptyText:"请输入用户名" ,
 38                  allowBlank:false ,
 39                  blankText:"请输入用户名！"
 40                },
 41                {
 42                 inputType:'password',
 43                 fieldLabel:"密码",
 44                id:"pwd1" ,
 45                name:"pwd1" ,
 47                width:150,
 48                labelAlign:"right",
 49                allowBlank:false ,
 50                blankText:"密码不能为空！"
 51                },
 52                {
 53                inputType:'password',
 54                fieldLabel:"确认密码",
 55                id:"pwd2" ,
 56                name:"pwd2" ,
 57                
 58                width:150,
 59                labelAlign:"right",
 60                allowBlank:false ,
 61                blankText:"确认密码不能为空！",
 62                validator:function()
 63                {
 64                   if(Ext.get("pwd1").dom.value!=Ext.get("pwd2").dom.value)
 65                   {
 66                      return false ;
 67                   }
 68                   else
 69                   {
 70                     return true;
 71                   }
 72                },
 73                invalidText:"两次密码不一致！"
 74                }
 75                ],
 76                buttons:[{
 77                  text:"注册",
 78                  xtype:"submit",
 79                  formBind:true,
 80                  handler:function()
 81                  { 
 82                     Ext.MessageBox.show({
 83                       wait:true ,
 84                      title:"请稍侯",
 85                      width:150,
 86                      progressText:"saving" ,
 87                      waitConfig:{interval:200,duration:2000,fn:function(){
 88                          Ext.MessageBox.hide();
 89                           Ext.MessageBox.alert("恭喜","注册成功！");
 90                           win.hide();
 91                      }}
 92                     });
 93                    
 94                  }
 95                },
 96                {
 97                 text:"取消",
 98                handler:function()
 99                {
100                   regform.form.reset();
101                } 
102                }
103                ] 
104        });
105        
106        
107 //        var IsExsit=false;//此变量一定要在方法外面定义
108 //        function CheckUserName(){ //检查用户名是否存在
109 //            var username = Ext.get('username').dom.value;
110 //            Ext.Ajax.request({
111 //                url:'CheckUserName.aspx',
112 //                params:{name:username},
113 //                success: function(response, options) {            
114 //                   var data = Ext.util.JSON.decode(response.responseText);             
115 //                   if(data.success == true){  
116 //                       ReturnValue(true);
117 //                   }else{  
118 //                       ReturnValue(false);//不能在success里面直接return
119 //                   }  
120 //                }  
121 //            });
122 //            
123 //              function ReturnValue(ok){//此方法必须放CheckUserName里面。
124 //              IsExsit = ok;
125 //            }
126 //            return IsExsit;
127 //        }
128       
129       var win=new Ext.Window({
130          title:"Ext例子",
131          width:300,
132          height:200,
133         // modal:true,
134         shadow:"sides",
135         shadowOffset:50,
136         closeAction:"hide",
137         closable:true,
138         collapsible:true,
139         maximizable:true,
140         items:regform
141       });
142       
143       win.show(); 
144        
145      })
146     
147 
148    </script>

当然想理解上面的代码,您也得对Ext这个强大的框架有一定的接触。好了，到这里为止整个例子的代码也都在这里了，由于本人初来乍到，可能有些疏漏或讲行晦涩的部分了，希望各位多多指教！

另外，上传本例子的源码，大家可以从这里下载。

                                                                                                            2008年10月13日