ext实现登录

Js代码  

1. Ext.form.Field.prototype.msgTarget = 'side';   
2. //定义表单   
3. var simple = new Ext.FormPanel({   
4.     labelWidth: 75,   
5.     baseCls: 'x-plain',   
6.     width: 150,   
7.     defaultType: 'textfield',//默认字段类型   
8.     //定义表单元素   
9.     items: [{   
10.         fieldLabel: '帐户',   
11.         name: 'name',//元素名称   
12.         //anchor:'95%',//也可用此定义自适应宽度   
13.         allowBlank:false,//不允许为空   
14.         blankText:'帐户不能为空'//错误提示内容   
15.     },{   
16.         inputType:'password',   
17.         fieldLabel: '密码',   
18.         //anchor:'95%',   
19.         name: 'pws',   
20.         allowBlank:false,   
21.         blankText:'密码不能为空'   
22.     }],   
23.     buttons: [{   
24.         text: '登陆',   
25.         type: 'submit',   
26.         //定义表单提交事件   
27.         handler:function(){   
28.             if(simple.form.isValid()){//验证合法后使用加载进度条   
29.                 Ext.MessageBox.show({   
30.                     title: '请稍等',   
31.                     msg: '正在加载...',   
32.                     progressText: '',   
33.                     width:300,   
34.                     progress:true,   
35.                     closable:false,   
36.                     animEl: 'loding'   
37.                 });   
38.                 //控制进度速度   
39.                 var f = function(v){   
40.                     return function(){   
41.                         var i = v/11;   
42.                         Ext.MessageBox.updateProgress(i, '');   
43.                     };   
44.                 };   
45.                 for(var i = 1; i < 13; i++){   
46.                     setTimeout(f(i), i*150);   
47.                 }   
48.                   
49.                 //提交到服务器操作   
50.                 simple.form.doAction('submit',{   
51.                     url:'check.asp',//文件路径   
52.                     method:'post',//提交方法post或get   
53.                     params:'',   
54.                     //提交成功的回调函数   
55.                     success:function(form,action){   
56.                         if (action.result.msg=='ok') {   
57.                             document.location='index.html';   
58.                         } else {   
59.                             Ext.Msg.alert('登陆错误',action.result.msg);   
60.                         }   
61.                     },   
62.                     //提交失败的回调函数   
63.                     failure:function(){   
64.                         Ext.Msg.alert('错误','服务器出现错误请稍后再试！');   
65.                     }   
66.                 });   
67.             }   
68.         }   
69.     },{   
70.         text: '取消',   
71.         handler:function(){simple.form.reset();}//重置表单   
72.     }]   
73. });  
74.    
75. //定义窗体   
76. var win = new Ext.Window({   
77.     id:'win',   
78.     title:'用户登陆',   
79.     layout:'fit', //之前提到的布局方式fit，自适应布局   
80.     width:300,   
81.     height:150,   
82.     plain:true,   
83.     bodyStyle:'padding:5px;',   
84.     maximizable:false,//禁止最大化   
85.     closeAction:'close',   
86.     closable:false,//禁止关闭   
87.     collapsible:true,//可折叠   
88.     plain: true,   
89.     buttonAlign:'center',   
90.     items:simple//将表单作为窗体元素嵌套布局   
91. });   
92.   
93. win.show();//显示窗体  

转载于:https://www.cnblogs.com/yin-jingyu/archive/2011/08/02/2124601.html