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