Simple ExtJs 3 ajax login form

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

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

Comments

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

Thanks.

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 = !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 = 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));

Excellent article!, Thanks!

Pages

Add new comment