ExtJs form submission and login implementation code _ extjs

Source: Internet
Author: User
In the previous article, I made a simple login interface written with ext. Today, we will achieve the login effect, mainly to review the use of the Form submission method in ext. 1. Add and click Submit events in the subclass.

The Code is as follows:


// Click the event button
LoginFun: function (){
Var f = Ext. getCmp ("loginForm ");
// Form Verification
If (f. form. isValid ){
F. form. submit ({
WaitTitle: "Please wait ",
WaitMsg: 'login ...',
Url: 'http: // www.cnblogs.com/Service/SystemService/SystemService.ashx? Method = UserLogin ',
Method: 'post ',
Success: function (form, action ){
Window. location = 'main.htm'
},
Failure: function (form, action ){
If (action. result = undefined ){
Ext. Msg. alert ('hprompt ', "system error... contact the Administrator ");
Form. items. items [1]. reset ();
}
Else {
Ext. Msg. alert ('hprompt ', action. result. rspText );
Form. items. items [1]. reset ();
}
}
});
}
},


2. bind an event to the login button during initialization

The Code is as follows:


// Initialization
Init: function (){
This. LoginWin. show ();
Ext. getCmp ("loginBtn"). on ('click', this. loginFun );
This. loadMask = new Ext. LoadMask (this. LoginWin. body, {msg: "loading the page ...... "});
}


3. About ext. extend
Definition: function extend (function sb, function sp, Object overrides)
Simple explanation: the first parameter-subclass
The second parameter -- parent class
Third parameter -- override object
In this example, the subclass is XQH. ExtJs. Frame. app.
The parent class Ext. util. Observable (an Abstract base class) provides a public interface for event management .)
For more details, see (to) http://wangyu.javaeye.com/blog/210849
4. url: 'http: // www.jb51.net/Service/SystemService/SystemService.ashx? Method = UserLogin'

The Code is as follows:


Public void UserLogin ()
{
StringBuilder jsonData = new StringBuilder ();
Bool success = false;
String rspText = string. Empty;
If (Request ["LoginName"]! = Null & Request ["LoginPsd"]! = Null)
{
String loginName = Request ["LoginName"]. Trim ();
String loginPsd = Request ["LoginPsd"]. Trim ();
XUser userEnity = userAccess. GetUserByName (loginName );
If (userEnity! = Null)
{
If (userEnity. LoginPsd = loginPsd)
{
Success = true;
Session ["UserEnity"] = userEnity;
}
Else
{
Success = false;
RspText = "incorrect account or password ";
}
}
Else
{
Success = false;
RspText = "the account does not exist. Please contact the Administrator ";
}
JsonConvert Json = new JsonConvert ();
JsonData = json. ToRequest (success, rspText, userEnity );
}
Response. Write (jsonData );
Response. End ();
}


Note: The returned data must be success in Json format. rspText indicates that the returned data is called through action. result. success in js.
Come here today and implement the background interface framework next time.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.