Ext js 用户验证.docVIP

今天我们介绍的是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???