Ext2.2用户名和密码登录表单的例子

这个表单也是我使用中的一个东西。感觉还不错。

先看运行效果


看代码

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
5. <script type="text/javascript" src="adapter/prototype/prototype.js"></script>
6. <script type="text/javascript" src="adapter/prototype/scriptaculous.js?load=effects"></script>
7. <script type="text/javascript" src="adapter/prototype/ext-prototype-adapter.js"></script>
8. <script type="text/javascript" src="ext-all.js"></script>
9. <style type="text/css">
10. #LOGIN_FORM_LAYER {
11.   position:relative;
12.   top:150px;
13.   width: 965px;
14.   height: 551px;
15. }
16. #loginDIV {
17.   width:500px;
18.   position:relative;
19.   top:100px;
20. }
21. </style>
22. </head>
23. <body>
24. <center>
25. <script type="text/javascript">
26. Ext.onReady(function(){
28.     Ext.QuickTips.init();
30.     // turn on validation errors beside the field globally
31.     Ext.form.Field.prototype.msgTarget = 'side';
33.     var bd = Ext.getBody();
35.     /*
36.      * ================  Simple form  =======================
37.      */
38.     //bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
41.     var simple = new Ext.FormPanel({
42.         id: 'LOGIN_FORM',
43.         labelWidth: 75, // label settings here cascade unless overridden
44.         url:'login.jsp',
45.         frame:true,
46.         title: '<font size=3>登录系统</font>',
47.         bodyStyle:'padding:5px 5px 0',
48.         width: 350,
49.         defaults: {width: 230},
50.         defaultType: 'textfield',
51.         ctCls: 'font-size:12px',
53.         items: [{
54.                 fieldLabel: '用户名',
55.                 name: 'username',
56.                 allowBlank:false
57.             },{
58.                 fieldLabel: '密码',
59.                 name: 'password',
60.                 inputType :'password'
61.             },new Ext.form.Hidden({
62.               name:'referer',
63.               value:'/index'
64.             })
65.         ],
67.         buttons: [{
68.             id: 'submitButton',
69.             type: 'submit',
70.             text: '登录',
71.             tooltip: '点击这个按钮登录系统',
72.             handler: login
73.         }]
74.     });
75.     simple.render("loginDIV");
76. });
77. function login(){
78.   Ext.Ajax.request({
79.     url: '/login',
80.     form: 'LOGIN_FORM',
81.     success: function(t){
82.       alert(t.responseText);
83.     }
84.   });
85. }
86. </script>
87. <div id="LOGIN_FORM_LAYER">
88. <div id="loginDIV"></div>
89. </div>
90. </center>
91. </body>
92. </html>

其中的/login处理登录的代码我就不写了。大家自己做吧。