Simple login Extjs

example code extjs login

    Ext.BLANK_IMAGE_URL = '/fluxo/public/images/default/s.gif';
   Ext.QuickTips.init();  
   Ext.form.Field.prototype.msgTarget = 'side';
 
   var win;  
   var trim = Ext.util.Format.trim;

   Ext.namespace('Login');

   var Login = function() {
       var Logar = function() {
           formPanel = Ext.getCmp('my-form');

           if(Ext.isEmpty(trim(Ext.get('login').getValue()))){
               Ext.MessageBox.show({
                   title: 'Erro',
                   msg: 'Digite um nome!',
                   buttons: Ext.MessageBox.OK,
                   animEl: 'Botao',
                   icon: Ext.MessageBox.ERROR,
                   fn: function(){
                       Ext.getCmp('login').setValue("");
                       Ext.getCmp('login').focus();
                   }
               });
               return false;
           }

           if(Ext.isEmpty(trim(Ext.get('senha').getValue()))){
               Ext.MessageBox.show({
                   title: 'Erro',
                   msg: 'Digite uma senha!',
                   buttons: Ext.MessageBox.OK,
                   animEl: 'Botao',
                   icon: Ext.MessageBox.ERROR,
                   fn: function(){
                       Ext.getCmp('senha').setValue("");
                       Ext.getCmp('senha').focus();
                   }
               });
               return false;
           }

           if (formPanel.form.isValid()) {
               formPanel.form.submit({
                   reset: true,
                   success: function(windowForm, action) {
                       Ext.MessageBox.show({
                          msg: " Carregando as configurações",
                          progressText: 'Acessando sistema...',
                          width:300,
                          wait:true,
                          waitConfig:{interval:200},
                          icon:'ext-sistema-load',
                          animEl:'login-win'
                      });
                       setTimeout(function(){
                           Ext.MessageBox.hide();
                           location.reload();
                       }, 1200);
                       win.hide();
                   },
                   failure: function(formPanel, action) {
                       Ext.MessageBox.show({
                           title: 'Erro',
                           msg: 'Usuario ou senha invalidos!',
                           buttons: Ext.MessageBox.OK,
                           animEl: 'Botao',
                           icon: Ext.MessageBox.ERROR
                       });
                   }
               });
           }
       };
     
       return {
           init: function() {
               try {
                   this.createWindow();
               }
               catch(e) {
               var a = {};
                   alert('Erro: "' + e.message + '" linha: ' + e.lineNumber);
               }
           },
         
           createWindow: function() {
               document.title = "Login";
               if(!(win instanceof Ext.Window)){
                   win = new Ext.Window({
                       title: 'Login',
                       baseCls: 'x-window',
                       iconCls: 'image_login',
                       width:185,
                       height:118,
                       plain: true,
                       layout: 'fit',
                       plain: true,
                       collapsible: false,
                       resizable: false,
                       closable: false,
                       closeAction:'hide',
                       modal: true,
                       border: false,
                       keys: [{
                           key: Ext.EventObject.ENTER,
                           fn: function(){
                               if(!(Ext.isEmpty(trim(Ext.get('login').getValue()))) && !(Ext.isEmpty(trim(Ext.get('senha').getValue())))){
                                   Logar();
                               }
                           },
                           scope: this
                       }],
                       items: new Ext.form.FormPanel({
                           id: 'my-form',
                           method: 'POST',
                           baseParams:{modulo:'login'},
                           baseCls: 'x-fieldset',
                           labelWidth: 45,
                           labelAlign:'right',
                           url:'http://localhost/fluxo/auth/login',
                           waitMsgTarget: false,
                           defaultType: 'textfield',
                           layout: 'form',                          
                           onSubmit : function(e){
                               e.stopEvent();
                           },
                           defaults: {
                               width: 100,
                               minLength : 3,
                               maxLength : 10,
                               allowBlank:false,
                               selectOnFocus : true,
                               minLengthText : "O campo deve ter no minimo de {0} caracteres",
                               maxLengthText : "O campo deve ter no máximo de {0} caracteres"
                           },
                     
                           items: [{
                               fieldLabel: "Nome",
                               id:'login',
                               name: 'login',
                               tabIndex:1,
                               validationEvent : "blur",
                               autoCreate: {tag: "input", type: "text", autocomplete: "off", maxLength: 10},
                               blankText: 'Digite um Nome',
                               fireKey : function(e) {
                                   if(e.getKey() == e.ENTER) {
                                       Ext.getCmp('senha').focus();
                                   }
                               }
                           },{
                               fieldLabel: "Senha",
                               id:'senha',
                               name: 'senha',
                               tabIndex:2,
                               validationEvent : "blur",
                               autoCreate: {tag: "input", type: "password", autocomplete: "off", maxLength: 10},
                               blankText: 'Digite uma Senha'
                           }],
                         
                           buttonAlign:'center',
                           buttons: [{
                               id:'Botao',
                               text:'Entrar',
                               type: 'submit',
                               disabled: false,
                               minButtonWidth: 75,
                               handler: Logar
                           }]
                       }),
                       focus: function(){
                           Ext.get('login').focus();
                       }
                   });
               }
               win.show();
           }
       }
   }();
   Ext.EventManager.onDocumentReady(Login.init, Login, true);

AJAX Introduction

AJAX = Asynchronous JavaScript and XML

AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications.

With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

The AJAX technique makes Internet applications smaller, faster and more user-friendly.

: w3schools.com/Ajax/ajax_intro.asp