Home

Simple ExtJs 3 ajax login form

Submitted by CoolGoose on Mon, 05/11/2009 - 16:38
Posted in

So for those of you that wonder how you can make a quick simple ExtJs 3 ajax login form
check the code below :)

  1. <script type="text/javascript">
  2.     // Path to the blank image should point to a valid location on your server
  3.     Ext.BLANK_IMAGE_URL = './extjs/resources/images/default/s.gif';
  4.                
  5.     Ext.onReady(function(){    
  6.                                        
  7.                         Ext.QuickTips.init();
  8.  
  9.                         var msg = function(title, msg) {
  10.                         Ext.Msg.show({
  11.                             title: title,
  12.                             msg: msg,
  13.                             minWidth: 200,
  14.                             modal: true,
  15.                             icon: Ext.Msg.INFO,
  16.                             buttons: Ext.Msg.OK
  17.                         });
  18.                     };
  19.                                
  20.                         var loginForm = new Ext.form.FormPanel({
  21.                                 frame:true,
  22.                                 width:260,     
  23.                                 labelWidth:60,         
  24.                                 defaults: {
  25.                                         width: 165,
  26.                                 },
  27.                                 items: [
  28.                                         new Ext.form.TextField({
  29.                                     id:"username",
  30.                                     fieldLabel:"Username",
  31.                                     allowBlank:false,
  32.                                     blankText:"Enter your username"
  33.                                 }),
  34.                                         new Ext.form.TextField({
  35.                                     id:"password",
  36.                                     fieldLabel:"Password",
  37.                                                 inputType: 'password',
  38.                                     allowBlank:false,
  39.                                     blankText:"Enter your password"
  40.                                 })
  41.                                 ],
  42.                                 buttons: [{
  43.                                         text: 'Login',                         
  44.                                         handler: function(){
  45.                                 if(loginForm.getForm().isValid()){
  46.                                         loginForm.getForm().submit({
  47.                                             url: 'check_login.php',
  48.                                             waitMsg: 'Processing Request',
  49.                                             success: function(loginForm, resp){
  50.                                                 msg('Success', 'Welcome "'+ resp.result.message +'" on the cluster manager');
  51.                                             }
  52.                                         });
  53.                                 }
  54.                             }
  55.                                 }]
  56.                         });
  57.                        
  58.                         var loginWindow = new Ext.Window({
  59.                                 title: 'Welcome to At-byte',
  60.                                 layout: 'fit',                 
  61.                                 height: 140,
  62.                                 width: 260,                            
  63.                                 closable: false,
  64.                                 resizable: false,                              
  65.                                 draggable: false,
  66.                                 items: [loginForm]                     
  67.                         });
  68.                        
  69.                         loginWindow.show();
  70.                        
  71.     }); //end onReady
  72.     </script>

Nice Work. What would the

Submitted by Joe (not verified) on Tue, 01/12/2010 - 01:28.

Nice Work. What would the check_login.php page look like?

Thanks.

check_login.php: $userName =

Submitted by nhantam (not verified) on Thu, 03/25/2010 - 05:11.

check_login.php:
$userName = !empty($_POST['username']) ? trim($_POST['username']) : '';
$password = !empty($_POST['password']) ? $_POST['password'] : '';

$userCompare = 'user';
$passCompare = 'user';

if(strcasecmp($userName,$userCompare)==0){
return true;
}

But login form only loading...
http://img690.imageshack.us/img690/5960/exterror.jpg

Could you help me ?

check_login.php $userName =

Submitted by nhantam on Thu, 03/25/2010 - 05:30.

check_login.php
$userName = !empty($_POST['username']) ? trim($_POST['username']) : '';
$password = !empty($_POST['password']) ? $_POST['password'] : '';

$userCompare = 'user';
$passCompare = 'user';

if(strcasecmp($userName,$userCompare)==0){
return true;
}

when I Click button Login at login.html
Browser loading away the following:
http://img690.imageshack.us/img690/5960/exterror.jpg

Could you help me, how do I check ?

$loginUsername =

Submitted by CoolGoose on Thu, 05/06/2010 - 19:42.

$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : "";

if($loginUsername == "f"){
echo "{success: true}";
} else {
echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}

Something like this if you want do do it by hand. If not json_encode(array('success'=>true));

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1 + 4 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

If you need more help on the topic feel free to add a comment or create a new post on the Forum