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 :)
- // Path to the blank image should point to a valid location on your server
- Ext.BLANK_IMAGE_URL = './extjs/resources/images/default/s.gif';
- Ext.onReady(function(){
- Ext.QuickTips.init();
- var msg = function(title, msg) {
- Ext.Msg.show({
- title: title,
- msg: msg,
- minWidth: 200,
- modal: true,
- icon: Ext.Msg.INFO,
- buttons: Ext.Msg.OK
- });
- };
- var loginForm = new Ext.form.FormPanel({
- frame:true,
- width:260,
- labelWidth:60,
- defaults: {
- width: 165,
- },
- items: [
- new Ext.form.TextField({
- id:"username",
- fieldLabel:"Username",
- allowBlank:false,
- blankText:"Enter your username"
- }),
- new Ext.form.TextField({
- id:"password",
- fieldLabel:"Password",
- inputType: 'password',
- allowBlank:false,
- blankText:"Enter your password"
- })
- ],
- buttons: [{
- text: 'Login',
- handler: function(){
- if(loginForm.getForm().isValid()){
- loginForm.getForm().submit({
- url: 'check_login.php',
- waitMsg: 'Processing Request',
- success: function(loginForm, resp){
- msg('Success', 'Welcome "'+ resp.result.message +'" on the cluster manager');
- }
- });
- }
- }
- }]
- });
- var loginWindow = new Ext.Window({
- title: 'Welcome to At-byte',
- layout: 'fit',
- height: 140,
- width: 260,
- closable: false,
- resizable: false,
- draggable: false,
- items: [loginForm]
- });
- loginWindow.show();
- }); //end onReady
Technology:
Comments
Code Monkey (not verified)
Tue, 01/12/2010 - 01:28
Permalink
Nice Work. What would the
Nice Work. What would the check_login.php page look like?
Thanks.
Code Monkey (not verified)
Thu, 03/25/2010 - 05:11
Permalink
check_login.php: $userName =
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 ?
nhantam
Thu, 03/25/2010 - 05:30
Permalink
check_login.php $userName =
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 ?
CoolGoose
Thu, 05/06/2010 - 20:42
Permalink
$loginUsername =
$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));
Code Monkey (not verified)
Mon, 09/20/2010 - 02:58
Permalink
Excellent article!, Thanks!
Excellent article!, Thanks!
Pages
Add new comment