In this section, we will create a login page based on the content described in the previous sections, so that the content described in the previous sections will run through.
1.CodeAs follows:
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 framework --> 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 framework ended --> 16 <SCRIPT type = "text/JavaScript"> 17 Ext. onready ( Function (){ 18 // Initialize the ext: QTip attribute in the tag. 19 Ext. quicktips. INIT (); 20 Ext. Form. Field. Prototype. msgtarget = 'day' ; 21 // Button Handling Method 22 VaR Btnsubmitclick = Function (){ 23 If (Form. getform (). isvalid ()){ 24 // Generally, it is sent to the server side to obtain the returned value and then process it. In the future tutorial, we will explain the interaction between the form and the server. 25 Ext. msg. Alert ("prompt", "Login successful! " ); 26 } 27 } 28 // Reset button "click" Handling Method 29 VaR Btnresetclick = Function (){ 30 Form. getform (). Reset (); 31 } 32 // Submit button 33 VaR Btnsubmit = New Ext. Button ({ 34 Text: 'submit' , 35 Handler: btnsubmitclick 36 }); 37 // Reset button 38 VaR Btnreset =New Ext. Button ({ 39 Text: 'reset' , 40 Handler: btnresetclick 41 }); 42 // User name input 43 VaR Txtusername = New Ext. Form. textfield ({ 44 Width: 140 , 45 Allowblank: False , 46 Maxlength: 20 , 47 Name: 'username' , 48 Fieldlabel: 'username' , 49 Blanktext: 'enter your username' , 50 Maxlengthtext: 'the user name cannot exceed 20 characters' 51 }); 52 // Password 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: 'password' , 60 Blanktext: 'Enter the password' , 61 Maxlengthtext: 'The password cannot exceed 20 characters' 62 }); 63 // Verification Code Input 64 VaR Txtcheckcode = New Ext. Form. textfield ({ 65 Fieldlabel: 'captcha' , 66 ID: 'checkcode' , 67 Allowblank: False , 68 Width: 76 , 69 Blanktext: 'enter the verification code! ' , 70 Maxlength: 4 , 71 Maxlengthtext: 'the verification code cannot exceed 4 characters! ' 72 }); 73 // Form 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 // Form 86 VaR Win = New Ext. Window ({ 87 Title: 'user login' , 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 // Create Verification Code 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 Note: 115 (1) line 88, iconcls: 'loginicon' : Add a small icon to the form. The style is defined in line 1. 116 (2) Ext. getdom ('checkcode' ): Obtain the DOM by ID. 117 (3 ) Ext. Get (checkcode. parentnode): Get the parent node based on Dom. 118 (4) checkimage. createchild (): Create a subnode with the label . 119 (5 ) Form. getform (). isvalid (): checks whether all verification items in the form pass. 120 (6 ) Form. getform (). Reset (): resets the form. 121 --> 122 </Body> 123 </Html>
2. The effect is as follows:
3. the attachment is as follows:
: Login.gif
: Checkcode.gif
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
