Creando una ventana de login con ExtJS o Sencha

Por Yëco en ExtJS21 de Junio, 2009 | 1:37 am | Compartir

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 (ahora Sencha) 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: 

        <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: 

  <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: 

<div id="loading-mask">&nbsp;</div>
<div id="loading">
<div class="loading-indicator">
	<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: 

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.

  • Henry
    Hola gracias por el material esta bueno, la necesidad que tengo es que la direccionamiento luego de
    var redirect = "http://google.com";
    window.location = redirect
    es decir q este direccionamiento sea dinamico de acuerdo al tipo de usuario el q esta definido en mi base d datos osea si es admin va a un lugar con todos permisos si user ira a otros con ciertas restricciones
  • Henry
    osea como hacer para q se vaya a diferentes paginas de acuerdo al logeo
  • Podés devolver el tipo de usuario en el json response que manda el php y valorarlo con una condición en el success del JS.

    php:

    echo "{success: true, usertype: 2}";

    javascript:

    success: function(form, action) {
    switch(action.result.usertype){
    case 1:
    // va para la pagina uno
    break;
    case 2:
    // va para la pagina dos
    break;
    default:

    }
    },
  • Henry
    muchas gracias muy agradecido exitos
  • Rodolfolay
    Una vez que se logea, como hago para mostrar el nombre del usuario en un toolbar.
    Lo que hize fue poner en un tbtext lo siguiente : text: "" pero no me ha funcionado, alguna idea?
  • Asumiendo que guardaste ese valor en la sesión antes de mostrarlo.

    Se me ocurren dos formas. Una sería incluir el texto como item del toolbar:

    items: [{
    text:'hola texto'
    }]


    O bien si eso te falla podrías usar el método addText(). Buscalo en la documentación del toolbar, debe de andar por ahí.
  • Henry
    Una consulta yo también soy principiante y quisiera saber la forma como recibir los valores mediante este forma de trabajo para poder autentificarlo de antemano muchas gracias, o tal vez me recomendarias algun link que me pueda ayudar gracias...
  • Claro. Empezá por descargarte este zip (http://elbleg.com/share/post_137.zip ) y
    lo colocás en un server apache. En él está un php que te puede dar una mano.

    Cualquier duda, acá estamos.
  • muy lindo, y util :)
  • ruben_ortiz
    No me ha servido, sigo sin encontrar un codigo que me muestre el js y sus casillas con extjs. Hasta ahora ha sido inutil este extjs
blog comments powered by Disqus
  • Mail
  • Delicious
  • Digg
  • StumbleUpon
  • Twitter
  • Technorati