Creando una ventana de login con ExtJS

Yëco — Sun, 21 Jun 2009 07:37:22 +0000

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 agregamos estos estilos:

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

Dentro del cuerpo agregamos algo como esto:

 


	 Loading…

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

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:

echo "{success: true}";

Fallo:

echo "{success: false, errors: { reason: 'Password error.' }}";

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

elBlëg - Interactividad, usabilidad y web » ExtJS

Creando una ventana de login con ExtJS

Ya entrando en materia