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