朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
在這節我們通過前幾節講的內容做一個登陸頁面，把前幾節講的內容貫穿一下。
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