抱歉各位,由于工作繁忙,很久没有写新文章了,在此感谢各位的支持!
今天我们介绍的是Ext,作为一个功能强大的Ajax框架Ext拥有华丽的界面可以用在富客户端的开发上,彻底颠覆了人们对js的认识“原来脚本也不是想象中的麻烦”。如今已经有Ext 2.2的版本了。在Ext2.2的版本中添加了许多新的特性,特别是对GMap的支持,获得更多的信息请访问Ext官网、Ext中文社区。下面介绍一个基于Ext2.1进行用户验证注册的例子:
一、主界面设计:
(图一)
(图二)
(图三)
(图四)
(图五)
以上的五张图就为我们完整的展示了这个例子,接下来我们着重介绍代码部分。
二、代码逻辑设计:
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日