Extjs 2 (logon)

Original http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html

Preface

Last renewal.

Start

1. in Solution Explorer, select the scripts \ extjs \ UX directory, right-click Add, and choose new from ADD. In the displayed window, select the JScript file and change the name to login. JS (you can directly copy this file to this directory for future projects)

Note that the file name cannot use the full name of the class as the file name, because dynamic loading will automatically find the directory based on the class name and load the file. The name after the last decimal point in the class name is the file name, for example, all types of Logon Windows are called ext. UX. login, while login is the file name.

If you want to use extjs prompts in the script, you can use Ext. copy the JS file to the extjs directory. drag js to login. in the JS file, the followingCode:

 
///<Reference Path = "../EXT. js"/>
 

2. Now, write down the class definition, including the parent class, Singleton mode, window title, width, and height. The window is titled "ext js mvc logon window ". The width and height are tentatively set to 400 and then adjusted. The final code is as follows (in login. JS ):

 
Ext. Define ("Ext. UX. login", {Extend:"Ext. Window. Window", Singleton:True, Title:'Extjs MVC login Windows', Width:400, Height: 400});
 

3. Consider the configuration items that should be included in the window. The window should be modal, cannot be closed, cannot be adjusted, the close mode is hidden, and the hide mode is offset. Therefore, add the following code:

Modal:True, Closable:False, Resizable:False, Closeaction:'Hide', Hidemode:'Offsets ',
 

4. Define the logon control in the initcomponent method of the window. Generally, the logon window contains three text input boxes: User Name, password, and verification code, and images, logon, and reset buttons that display the verification code. Therefore, the extjs controls that need to be used include form panels, images, toolbar, buttons, and text fields. The following code first defines the form and adds the following code to the extension:

 
Initcomponent:Function(){VaRMe =This; Me. Form=Ext. Create (ext. Form. Panel, {}); me. callparent (arguments );}
 

In the code, me is used to save this object in the external scope as a local variable. The advantages include: first, if this is a global variable such as window, you can change the global variable to a local variable to improve access efficiency. The second is to allow the closure to access the object. This method is always used in the ext JS file. In the spirit of the doctrine, you should learn some good things.

Note that the object name in the create method is not a string, so you can directly use the object without converting the table to find the object, which can increase the speed.

Calling the callparent method is required. Otherwise, components may run incorrectly and fail to achieve the expected results.

5. to define the form configuration items, the Code is as follows:

 
Border:False, Bodypadding:5, Bodystyle:"Background: # dfe9f6 ",
 

In the code, the first sentence indicates that no border is required. If you like a form with a border, you can remove or change this field to true. The second sentence indicates to compress the form panel to 5 pixels, so that the components in the form will not be stuck with the border inside the window, which can be set according to your preference. The third sentence is to combine the background color of the form panel with the window, rather than the default white color.

6. Add the submission address of the form panel. Here it is set to account/login, which is the login method of the account controller. The Code is as follows:

 
URL: "account/login ",
 

7. because all text fields are used in the form, you can define them in a unified manner. For example, if the label width is 80, the separator of the label is Chinese colon, and the anchor is 0, it is not allowed to be empty, the Code is as follows:

 
Defaulttype: "textfield", Fielddefaults: {labelwidth:80, Labelseparator:":", Anchor:"0", Allowblank:False},
 

8. The next step is to define fields. This is simple. Because several configuration items have been defined by default, only field tags and names are left. The special character of the verification code, which must be six characters, is as follows:

Items: [{fieldlabel:"Username", name: "username"}, {Fieldlabel:"Password", name: "password", inputtype: "password"}, {Fieldlabel:"Verification Code", name: "vcode", minlength: 6, maxlength: 6}}
 

9. Now you need to consider how to display the verification code image. If you directly add the image control to the form, it is difficult to control the image position, because the best way is to set up a container first. Because instances of IMG objects need to be used when refreshing images, it is better to use an attribute to point to the object instance, so that the instance can be accessed within the class through this attribute. Add the following code to create an IMG instance before creating a form:

 
Me. Image =Ext. Create (ext. IMG, {SRC:"/Verifycode"});
 

Do not create an object after creating a form. Otherwise, the object cannot be found when inserting an image in the form.

In the code, the verification code image will be generated by the verifycode controller. This is temporarily put down and will be discussed later.

10. You also need to click the image to refresh the verification code, but check the API to find that the IMG object did not click the event. It doesn't matter. In ext JS 4.1, we modified the event definition method and can directly bind the event to the HTML element generated by the object, you only need to add the element configuration item to the listener event. This method is equivalent. Therefore, you can add the following code to the configuration object of the IMG instance:

 
Listeners: {Click: Me. onrefrehimage, element:"El", Scope: me}
 

In the code, El in the element configuration item indicates that you want to bind an event to the HTML element generated by the object, bind an event as a click event, and the event will call the onrefrehimage method. The method is simple to refresh the image, so you can use the setsrc method of the IMG object. Use the following code to complete the onrefrehimage method:

 
Onrefrehimage:Function(){This. Image. setsrc ("/verifycode? _ Dc = "+ (NewDate (). gettime ());}
 

The code is very simple. Just use the setsrc method to refresh the image's SRC, and add a timestamp to prevent the image from being cached.

Now, you can add the verification code image to the items form. The Code is as follows:

?

{Xtype:"Container", Height: 80, anchor:"-5", Layout:"Fit",Items: [Me. Image]}

From the code, we can see that the purpose of using the container is to use the fit layout to limit the image size, so that the layout is much easier.

You also need to add a message indicating that the verification code is case-insensitive. If you cannot see the verification code image clearly, click the image to refresh the Verification Code. The Code is as follows:

?

{Xtype:"Container", Anchor:"-5", HTML:"** The verification code is case-insensitive. If you cannot see the Verification Code clearly, click the image to refresh the verification code. "}

11. The rest of the form is the Add logon and reset buttons. The Code is as follows:

Dockeditems: [{xtype:'Toolbar', dock: 'bottom ', UI: 'footer', layout: {Pack: "center"}, Items: [{text:"Login", width: 80, Disabled:True, Formbind:True, Handler: Me. onlogin, scope: me}, {text:"Reset", width: 80, Handler: Me. onreset, scope: me}]}
 

The dockeditems configuration item is used here. The purpose is to introduce the new functions of ext JS 4, and to use this item conveniently. The Code defines a toolbar. The dock position is determined by the dock configuration item. Here it is the bottom (bottom). The toolbar style uses the footer defined by the UI configuration item, that is, the footer toolbar at the bottom of the original window. The layout of the toolbar is centered.

The logon button is disabled by default. The function of formbind configuration is to use this button only when the input in the form meets the requirements. This design is also added to ext JS4, which is very convenient, you no longer need to write your own code to implement this. The logon button will call the onlogin method. The reset button is simple, but it simply calls the onreset method.

The remaining steps are the onlogin and onreset methods. First, complete the simple onreset method. The basic function is to reset the form and move the focus to the first text field, that is, the user name, and refresh the Verification Code. The Code is as follows:

 
Onreset:Function(){VaRMe =This; Me. Form. getform (). Reset ();If(Me. Form. Items. items [0]) {Me. Form. Items. items [0]. Focus (True, 10);} Me. onrefrehimage ();}
 

In the code, you should note that the code for obtaining the first text field in the form, because after the form is instantiated, the items attribute points to the mixedcollection instance, because the text automatic object can be found in its items.

Next, the onlogin method is completed, which is difficult. That is, the isvalid method is called to verify whether the form meets the submission requirements, and then the submit method is called for submission. In fact, it is fine not to call isvalid, because the login button can be used only when isvalid is true. The Code is as follows:

 onlogin:  function   () {  var  me =  This  , F  =  me. form. getform ();   If   (F. isvalid () {f. submit ({  //   waitmsg: "You are logged on. Please wait ...... ",   //   waittitle: "logging on",  success:  function   (Form, Action) {window. location. reload () ;}, failure:   function  () {}, scope: me}) ;} 

After a successful login (success configuration item), the page is refreshed to write verification information to the cookie. Of course, you can also jump to another page, but I think it is not as easy as this, I will talk about it later.

A failed login (failure configuration item) only writes an empty function. Because the data format returned by Form submission is the same and the processing method is the same, the same function can be used for processing, but it has not been written, so an empty function is reserved first.

Finally, do not forget to add the form to the items of the window. This must be placed before calling callparent. It is better not to initialize the form. The Code is as follows:

 
Me. Items = [Me. Form]
 

At this point, the logon window is now ready.

The complete login. js code is as follows:

 //  /<Reference Path = "../EXT. js"/>  Ext. Define ( "Ext. UX. login" , {Extend: "Ext. Window. Window" , Singleton:  True , Title: 'Extjs MVC login Windows' , Width: 450 , Height: 300 , Modal:  True  , Closable:  False  , Resizable:  False  , Closeaction: 'Hide' , Hidemode: 'Offsets' , Initcomponent:  Function  (){ VaR Me = This  ; Me. Image = Ext. Create (ext. IMG, {style: "Cursor: Pointer" , Src: "/Verifycode" , Listeners: {Click: Me. onrefrehimage, element: "El" , Scope: Me }}); me. Form = Ext. Create (ext. Form. Panel, {border:  False  , Bodypadding: 5, Bodystyle: "Background: # dfe9f6" , URL: "Account/login" , Defaulttype: "Textfield" , Fielddefaults: {labelwidth: 80 , Labelseparator: ":" , Anchor: "0" , Allowblank:  False  }, Items: [{fieldlabel: "Username", name: "username"}, {Fieldlabel: "Password", name: "password", inputtype: "password" }, {Fieldlabel: "Verification Code", name: "vcode", minlength: 6, maxlength: 6 }, {Xtype: "Container", height: 80, anchor: "-5", layout: "fit" , Items: [Me. Image]}, {xtype: "Container", anchor: "-5", HTML: "** the verification code is case-insensitive. If you cannot see the Verification Code clearly, click the image to refresh the verification code. " }], Dockeditems: [{xtype: 'Toolbar', dock: 'bottom ', UI: 'footer', layout: {Pack: "center"}, Items: [{text: "Login", width: 80, Disabled: True , Formbind: True  , Handler: Me. onlogin, scope: me}, {text: "Reset", width: 80 , Handler: Me. onreset, scope: me}]}); me. Items = [Me. Form] me. callparent (arguments) ;}, onrefrehimage:  Function  (){  This . Image. setsrc ("/verifycode? _ Dc = "+ ( New Date (). gettime () ;}, onreset:  Function  (){  VaR Me = This  ; Me. Form. getform (). Reset ();  If (Me. Form. Items. items [0 ]) {Me. Form. Items. items [ 0]. Focus ( True , 10 ) ;}Me. onrefrehimage () ;}, onlogin:  Function  (){  VaR Me = This  , F = Me. Form. getform ();  If  (F. isvalid () {f. Submit ({  //  Waitmsg: "login in progress. Please wait ...... ",                  //  Waittitle: "logging on ", Success: Function  (Form, Action) {window. Location. Reload () ;}, failure:  Function () {}, Scope: me });}}});