Inicio > Desarrollo Web, Software Libre > Creando una Ventana de Login con Extjs

Creando una Ventana de Login con Extjs

Algunos de los que me conocen saben que me paso la mitad de mi tiempo peleando contra ExtJS… esa biblioteca es completamente imposible cuando se le mete el diablo. Otras veces, es increíblemente potente y sencilla de usar.

En este caso -aunque al final me quedé con una solución que hice en jQuery- muestra a grandes rasgos lo potente y sencillo que puede ser ExtJS cuando le da la gana. Para efectos del ejemplo, voy a basarme en la estructura de archivos que trae ExtJS por defecto, además de usar varios de los estilos disponibles que trae.

Ya entrando en materia

Creamos un archivo html dentro del folder “examples” del ExtJS y en el <head> agregamos estos estilos:

  1. <link rel=”stylesheet” type=”text/css” href=”../docs/resources/docs.css”/>
  2. <link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css” />
  3. <link rel=”stylesheet” type=”text/css” href=”../resources/css/xtheme-gray.css” />
  4. style>
  5. #loading_mask{
  6. width:100%;
  7. height: 100%;
  8. background: #c3daf9;
  9. position :absolute;
  10. z-index: 20000;
  11. left: 0;
  12. top: 0;
  13. }
  14. .loading-indicator img{
  15. width:16px;
  16. height:16px;
  17. }
  18. </style>
        <link rel="stylesheet" type="text/css" href="../docs/resources/docs.css"/>
        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../resources/css/xtheme-gray.css" />

    <style>
        #loading_mask{
        	width:100%;
        	height: 100%;
        	background: #c3daf9;
        	position :absolute;
        	z-index: 20000;
        	left: 0;
        	top: 0;
        }
        .loading-indicator img{
        	 width:16px;
        	height:16px;
        }
        </style>

Ahora, siempre en el <head> del documento, agregamos los script básicos de la biblioteca:

  1. <script src=”../adapter/ext/ext-base.js” type=”text/javascript”></script>
  2. <script src=”../ext-all-debug.js” type=”text/javascript”></script>
  <script src="../adapter/ext/ext-base.js" type="text/javascript"></script>
  <script src="../ext-all-debug.js" type="text/javascript"></script>

Dentro del cuerpo agregamos algo como esto:

  1. <div id=”loading-mask”>&nbsp;</div>
  2. <div id=”loading”>
  3. <div class=”loading-indicator”>
  4. <img src=”../resources/images/default/grid/loading.gif” align=”absmiddle”>&nbsp;Loading…
  5. </div>
<div id="loading-mask">&nbsp;</div>
<div id="loading">
<div>
	<img src="../resources/images/default/grid/loading.gif" align="absmiddle">&nbsp;Loading…
</div>

Ya con eso listo, es cosa de poner unos cuantos boxes y windows de ExtJS para terminar el login:

  1. var loadMask = function(){
  2. return {
  3. init: function() {
  4. // Creamos el cargador
  5. var loading = Ext.get(‘loading’);
  6. var mask = Ext.get(‘loading-mask’);
  7. mask.setOpacity(0.8);
  8. mask.shift({
  9. xy: loading.getXY(),
  10. width: loading.getWidth(),
  11. height: loading.getHeight(),
  12. remove: true,
  13. duration: 1,
  14. opacity: 0.3,
  15. easing: ‘bounceOut’,
  16. callback: function(){
  17. // Desvanece cuando la carga termina
  18. loading.fadeOut({
  19. duration: 0.2,
  20. remove: true
  21. });
  22. }
  23. });
  24. }};
  25. }();
  26. Ext.onReady(loadMask.init, loadMask, true);
  27. Ext.onReady(function(){
  28. Ext.QuickTips.init();
  29. Ext.form.Field.prototype.msgTarget = ‘side’;
  30. // Usamos un FormPanel para crear la caja de Login
  31. var login = new Ext.FormPanel({
  32. labelWidth: 80,
  33. url: “autenticar.php”,
  34. frame: true,
  35. title: ‘Iniciar sesión’,
  36. width: 230,
  37. padding: 10,
  38. defaultType: ‘textfield’,
  39. monitorValid: true,
  40. items: [{
  41. fieldLabel: ‘Usuario’,
  42. name: ‘user’,
  43. allowBlank: false
  44. },
  45. {
  46. fieldLabel: ‘Contraseña’,
  47. name: ‘password’,
  48. inputType: ‘password’,
  49. allowBlank: false
  50. }],
  51. buttons: [{
  52. text: ‘Inicio’,
  53. formBind: true,
  54. handler: function()
  55. {
  56. login.getForm().submit({
  57. method: ‘POST’,
  58. waitTitle: ‘Authenticando..’,
  59. waitMsg: ‘Enviando datos…’,
  60. success: function()
  61. {
  62. var redirect = “http://google.com&#8221;;
  63. window.location = redirect;
  64. },
  65. failure: function(form, action)
  66. // Pero si falla
  67. {
  68. if (action.failureType == ‘server’)
  69. {
  70. obj = Ext.util.JSON.decode(action.response.responseText);
  71. Ext.Msg.alert(‘Intenta de nuevo!’, obj.errors.reason);
  72. // Le decimos al usuario que el logueo falló y le damos el motivo
  73. }
  74. else
  75. {
  76. Ext.Msg.alert(‘Ouch!’, ‘el servidor no contesta : ‘ + action.response.responseText);
  77. // O bien si hubo algún error en el sistema
  78. }
  79. login.getForm().reset();
  80. }
  81. });
  82. }
  83. }]
  84. });
  85. // Usamos un Window para mostrar el Login en una ventanita
  86. var win = new Ext.Window(
  87. {
  88. layout: ‘fit’,
  89. width: 300,
  90. height: 150,
  91. closable: false,
  92. resizable: false,
  93. plain: true,
  94. items: [login] // y acá cargamos el panel con el login
  95. }
  96. );
  97. win.show();
  98. }
  99. );
var loadMask = function(){

    return {

        init: function() {
            // Creamos el cargador
            var loading = Ext.get('loading');
            var mask = Ext.get('loading-mask');
            mask.setOpacity(0.8);
            mask.shift({
                xy: loading.getXY(),
                width: loading.getWidth(),
                height: loading.getHeight(),
                remove: true,
                duration: 1,
                opacity: 0.3,
                easing: 'bounceOut',
                callback: function(){
                    // Desvanece cuando la carga termina
                    loading.fadeOut({
                        duration: 0.2,
                        remove: true
                    });
                }
            });
        }};
}();

Ext.onReady(loadMask.init, loadMask, true);
Ext.onReady(function(){

        Ext.QuickTips.init();
        Ext.form.Field.prototype.msgTarget = 'side';
        // Usamos un FormPanel para crear la caja de Login

        var login = new Ext.FormPanel({
            labelWidth: 80,
            url: "autenticar.php",
            frame: true,
            title: 'Iniciar sesión',

            width: 230,
            padding: 10,
            defaultType: 'textfield',
            monitorValid: true,
            items: [{
                fieldLabel: 'Usuario',
                name: 'user',
                allowBlank: false
            },
            {
                fieldLabel: 'Contraseña',
                name: 'password',
                inputType: 'password',
                allowBlank: false
            }],
            buttons: [{
                text: 'Inicio',
                formBind: true,
                handler: function()
                {
                    login.getForm().submit({
                        method: 'POST',
                        waitTitle: 'Authenticando..',
                        waitMsg: 'Enviando datos...',

                        success: function()
                        {
                            var redirect = "http://google.com";
                            window.location = redirect;

                        },
                        failure: function(form, action)
                        // Pero si falla
                        {
                            if (action.failureType == 'server')
                            {
                                obj = Ext.util.JSON.decode(action.response.responseText);
                                Ext.Msg.alert('Intenta de nuevo!', obj.errors.reason);
                                // Le decimos al usuario que el logueo falló y le damos el motivo
                            }
                            else
                            {
                                Ext.Msg.alert('Ouch!', 'el servidor no contesta : ' + action.response.responseText);
                                // O bien si hubo algún error en el sistema
                            }
                            login.getForm().reset();
                        }
                    });
                }
            }]
        });
        // Usamos un Window para mostrar el Login en una ventanita

        var win = new Ext.Window(
            {
                layout: 'fit',
                width: 300,
                height: 150,
                closable: false,
                resizable: false,
                plain: true,
                items: [login] // y acá cargamos el panel con el login
            }
        );
        win.show();
    }
);

Y listo, ya el login está listo, lo que queda es el response que te va a enviar backend cuando las credenciales sean correctas o no.

No voy a poner cómo generarlo, porque ya eso depende del lenguaje que estés usando en backend, voy a limitarme solamente a las respuestas que espera el javascript.

Éxito:

  1. echo “{success: true}”;
echo "{success: true}";

Fallo:

  1. echo “{success: false, errors: { reason: ‘Password error.’ }}”;
echo "{success: false, errors: { reason: 'Password error.' }}";

Ahora sí, estamos listos. Espero que haya servido para despertar algo de curiosidad por ExtJS.

Categorías:Desarrollo Web, Software Libre Etiquetas: , ,
  1. WALTER
    mayo 11, 2010 a las 12:01 am

    estaba buscando ejeplos de extjs y creo que esto me sera de gran ayuda gracias

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: