Creando una ventana de login con ExtJS
Por Yëco en ExtJS21 de Junio, 2009 | 1:37 am | CompartirAlgunos 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:
<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"> </div> <div id="loading"> <div class="loading-indicator"> <img src="../resources/images/default/grid/loading.gif" align="absmiddle"> 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.
-
ruben_ortiz
-
Yëco
-
ruben_ortiz
-
Yëco
-
ruben_ortiz
-
Yëco
-
ruben_ortiz
-
jamesjara
-
rpacosta
-
Yëco
Quién?
