无废话ExtJs 入门教程七[登陆窗体Demo：Login]

来源：互联网发布：淘宝怎么查排名编辑：程序博客网时间：2024/04/29 20:59
在这节我们通过前几节讲的内容做一个登陆页面，把前几节讲的内容贯穿一下。
1.代码如下：
  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     <title></title>  5     <!--ExtJs框架开始-->  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>  8     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />  9     <style type="text/css"> 10         .loginicon 11         { 12             background-image: url(image/login.gif) !important; 13         } 14     </style> 15     <!--ExtJs框架结束--> 16     <script type="text/javascript"> 17         Ext.onReady(function () { 18             //初始化标签中的Ext:Qtip属性。 19             Ext.QuickTips.init(); 20             Ext.form.Field.prototype.msgTarget = 'side'; 21             //提交按钮处理方法 22             var btnsubmitclick = function () { 23                 if (form.getForm().isValid()) { 24                     //通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。 25                     Ext.Msg.alert("提示", "登陆成功!"); 26                 } 27             } 28             //重置按钮"点击时"处理方法 29             var btnresetclick = function () { 30                 form.getForm().reset(); 31             } 32             //提交按钮 33             var btnsubmit = new Ext.Button({ 34                 text: '提 交', 35                 handler: btnsubmitclick 36             }); 37             //重置按钮 38             var btnreset = new Ext.Button({ 39                 text: '重 置', 40                 handler: btnresetclick 41             }); 42             //用户名input 43             var txtusername = new Ext.form.TextField({ 44                 width: 140, 45                 allowBlank: false, 46                 maxLength: 20, 47                 name: 'username', 48                 fieldLabel: '用户名', 49                 blankText: '请输入用户名', 50                 maxLengthText: '用户名不能超过20个字符' 51             }); 52             //密码input 53             var txtpassword = new Ext.form.TextField({ 54                 width: 140, 55                 allowBlank: false, 56                 maxLength: 20, 57                 inputType: 'password', 58                 name: 'password', 59                 fieldLabel: '密　码', 60                 blankText: '请输入密码', 61                 maxLengthText: '密码不能超过20个字符' 62             }); 63             //验证码input 64             var txtcheckcode = new Ext.form.TextField({ 65                 fieldLabel: '验证码', 66                 id: 'checkcode', 67                 allowBlank: false, 68                 width: 76, 69                 blankText: '请输入验证码！', 70                 maxLength: 4, 71                 maxLengthText: '验证码不能超过4个字符!' 72             }); 73             //表单 74             var form = new Ext.form.FormPanel({ 75                 url: '******', 76                 labelAlign: 'right', 77                 labelWidth: 45, 78                 frame: true, 79                 cls: 'loginform', 80                 buttonAlign: 'center', 81                 bodyStyle: 'padding:6px 0px 0px 15px', 82                 items: [txtusername, txtpassword, txtcheckcode], 83                 buttons: [btnsubmit, btnreset] 84             }); 85             //窗体 86             var win = new Ext.Window({ 87                 title: '用户登陆', 88                 iconCls: 'loginicon', 89                 plain: true, 90                 width: 276, 91                 height: 174, 92                 resizable: false, 93                 shadow: true, 94                 modal: true, 95                 closable: false, 96                 animCollapse: true, 97                 items: form 98             }); 99             win.show();100             //创建验证码101             var checkcode = Ext.getDom('checkcode');102             var checkimage = Ext.get(checkcode.parentNode);103             checkimage.createChild({104                 tag: 'img',105                 src: 'image/checkcode.gif',106                 align: 'absbottom',107                 style: 'padding-left:23px;cursor:pointer;'108             });109         });110     </script>111 </head>112 <body>113 <!--114 说明：115 (1)88行，iconCls: 'loginicon':给窗体加上小图标，样式在第12行定义。116 (2)Ext.getDom('checkcode')：根据ID获取Dom。117 (3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。118 (4)checkimage.createChild()：创建子节点，标签为<img src='image/checkcode.gif'..../>。119 (5)form.getForm().isValid()：校验表单的验证项是否全部通过。120 (6)form.getForm().reset()：重置表单。121 -->122 </body>123 </html>
2.效果如下：
3.附件如下：
：login.gif
：checkcode.gif
阅读全文
0 0