无废话ExtJs 入门教程七[登陆窗体Demo：Login]
在这节我们通过前几节讲的内容做一个登陆页面，把前几节讲的内容贯穿一下。
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
