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 :)
- <script type="text/javascript">
- // 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
- </script>
Comments
1 comment postedNice Work. What would the check_login.php page look like?
Thanks.
Post new comment