Step by step use Ext js mvc and Asp. Net MVC 3 to develop a logon window for a simple CMS Background Management System

After completing the configuration, complete the logon page. To write authentication information to the Cookie after login, you must perform a jump. Of course, you can do it without redirection or writing authentication information, but the problem is complicated. It is more appropriate to do simple processing here. In addition, the purpose of writing authentication information is to grant the permission to the Controller through the feature control method.
There are two ways to jump one time: one is to quickly display the login page, instead of loading Ext JS, but to display a login page using a traditional page, in this way, the page loading is fast, and users may feel a lot better. The second method is to use the Ext JS window as a logon window. However, to load the Ext JS library, it takes a long time to display and the experience is not very good. However, after loading Ext JS, cache data can be used when the main framework page is displayed later. Use that method based on your preferences or project requirements. This article demonstrates Ext JS and uses the second method to write a logon window.
As a common component, the logon window is also used in other projects, so it is suitable for writing an extension. Here, we also need to consider whether it is an extension of the singleton mode or simply an extension? The benefit of Singleton mode is that the show method can be used directly on the page, while the advantage of pure extension is that you can customize titles and icons through configuration items. I prefer the singleton mode because it is easier to modify the title class directly in the extension than to define the configuration items. After all, it is an extension written in Javascript, it is much easier to modify than to use C.
After the goal is clear, you can start. In Solution Explorer, select the Scripts \ ExtJS \ ux directory, right-click and choose add to create a new item, in the pop-up window 6, select the Jscript file and change the name to login. js (you can directly copy the file to this directory for future projects), and click the Add button to create the file. 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 following code is generated:
[Javascript]
/// <Reference path = "../Ext. js"/>

In this way, you can use the Ext JS prompt information in the script, enter "Ext. cr" in the file, and you will see the effect shown in 7.

 
Now, write the definition of the class, including the parent class, Singleton mode, window title, width, and height. The title of the window is "Simple CMS background management system background logon window ". The width and height are tentatively set to 400 and then adjusted. The final code is as follows:
[Javascript]
Ext. define ("Ext. ux. Login ",{
Extend: "Ext. window. Window ",
Singleton: true,
Title: 'simple CMS background management system background logon Windows ',
Width: 400,
Height: 400
});

Next, consider that the window should contain those configuration items. 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:
[Javascript]
Modal: true,
Closable: false,
Resizable: false,
CloseAction: 'hide ',
HideMode: 'offsets ',
 
Now, 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. They also contain images with verification codes displayed, logon and reset buttons. Therefore, the ExtJS controls that need to be used include form panels, images, toolbar, buttons, and text fields. The following is to define the form and add the following code in the extension:
[Javascript]
InitComponent: function (){
Var me = 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, the global variable can be changed 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 improve the speed. I suggest writing this.
Calling the callParent method is required. Otherwise, components may run incorrectly and fail to achieve the expected results. For more information, see the instructions in my book.
Next we will define the configuration items of the form. The configuration items that I would like to use are as follows:
[Javascript]
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. This is a matter of personal preferences.
Next, 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:
[Javascript]
Url: "Account/Login ",

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:
[Javascript]
DefaultType: "textfield ",
FieldDefaults :{
LabelWidth: 80,
LabelSeparator :":",
Anchor: "0 ",
AllowBlank: false
},
 
The next step is to define the field. This is simple because several configuration items have been defined by default, so only the field label and name are left. The special character of the verification code, which must be six characters, is as follows:
[Javascript]
Items :[
{
FieldLabel: "User name", name: "UserName"
},
{
FieldLabel: "Password", name: "password", inputType: "Password"
},
{
FieldLabel: "Verification Code", name: "Vcode", minLength: 6, minLength: 6
}
]

Now you need to consider how to display the verification code Image. If you add the Image control to the form directly, 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 object instance before creating the form:
[Javascript]
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.
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:
[Javascript]
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:
[Javascript]
OnRefrehImage: function (){
This. image. setSrc ("/VerifyCode? _ Dc = "+ (new Date (). 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:
[Javascript]
{
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:
[Javascript]
{
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. "
}

The rest of the form is the Add logon and reset buttons. The Code is as follows:
[Javascript]
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:
[Javascript]
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 ();
}
 
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 only be used when isValid is true, but I am used to it. It is unnecessary. The Code is as follows:
[Javascript]
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
});
}
}
 
In the submit method, waitMsg and waitTitle will display a waiting dialog box and mask the form with a mask to prevent users from editing. waitMsg is the prompt information to be displayed, waitTitle is the title of the pop-up window. However, in version 4.1.1, there is a bug. I have submitted it to the official forum,
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:
[Javascript]
Me. items = [me. form]
 
Now, the logon window is ready for the moment, and the progress is complete today.
Hey, the project progress will be depressing to the project manager.
I am too lazy to upload files. The following is the complete Login. js code:
[Javascript]
/// <Reference path = "../Ext. js"/>
 
Ext. define ("Ext. ux. Login ",{
Extend: "Ext. window. Window ",
Singleton: true,
Title: 'simple CMS background management system background logon Windows ',
Width: 400,
Height: 400,
Modal: true,
Closable: false,
Resizable: false,
CloseAction: 'hide ',
HideMode: 'offsets ',
 
InitComponent: function (){
Var me = this;
 
Me. image = Ext. create (Ext. Img ,{
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: "User name", name: "UserName"
},
{
FieldLabel: "Password", name: "password", inputType: "Password"
},
{
FieldLabel: "Verification Code", name: "Vcode", minLength: 6, minLength: 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
});
}
}
 
 
});