Mensajes y alertas al usuario Más videos
Comentarios: 37
Likes: 0 Persona
Duración: 20.55 minutos
Dificultad: Intermedio
Descripción del tema
Los mensajes son importantes para la interacción del usuario con nuestros sistemas, Ext JS cuenta con un componente especial para remplazar los típicos mensajes “alert” o confirmaciones por unos más llamativos.
Material de apoyo
Antes de seguir adelante es necesario descargar el material de apoyo para este tema, el cual contiene un HTML con varios botones y algunos estilos, un archivo JS vacío en el cual trabajaremos y una imagen la cual usaremos para el ejercicio, puedes además ver una demostración de lo que haremos en este tutorial.Empaquetando el ejemplo del tutorial
Vamos a definir un “paquete” en donde estaremos trabajando, hemos visto las ventajas de realizar esto anteriormente.Ext.ns('com.quizzpot.tutorial');
com.quizzpot.tutorial.Msg = {
init: function(){
//Aquí iré el código del tutorial
}
}
//cuando el DOM este listo ejecutamos la función “init”
Ext.onReady(com.quizzpot.tutorial.Msg.init,com.quizzpot.tutorial.Msg);
Alertas
Mediante el componente “Ext.MessageBox” Ext JS nos proporciona los métodos necesarios para generar diferentes tipos de mensajes, uno de estos son los “alerts”, los cuales los generamos de la siguiente manera:Ext.MessageBox.alert('Titulo','El mensaje que queremos dar');
//podemos usar el atajo
Ext.Msg.alert('Titulo','El mensaje que queremos dar');
Ahora vamos a agregarle el evento clic al botón “alert” que se encuentra en el HTML, dentro de este evento vamos a desplegar una mensaje de alerta.
Ext.get('alert').on('click',function(){
Ext.Msg.alert('Alerta','Esto es una alerta!');
},this);
De esta manera cuando presionemos el botón “Alert” se mostrará el mensaje que definimos en el código anterior.
Confirmación
Para mostrar una confirmación utilizamos el método “confirm”, en el siguiente ejemplo se le agrega el evento clic al botón de “confirmación” de la siguiente manera:Ext.get('confirm').on('click',function(){
Ext.Msg.confirm('Confirmación','¿Estás seguro de querer hacer esto?');
},this);
Más adelante veremos como detectar el botón presionado y tomar las acciones correspondientes, por ahora nos conformaremos con mostrar el diálogo.
Prompt
Este componente nos permite solicitar al usuario información mediante un diálogo que contiene una caja de texto. En el siguiente código le agregamos el evento clic al botón correspondiente y cuando se dispara el evento únicamente se despliega un mensaje solicitando el nombre del usuario.Ext.get('prompt').on('click',function(){
Ext.Msg.prompt('Prompt','¿Cual es tu nombre?');
},this);
Más adelante veremos como capturar la información que el usuario ha introducido en la caja de texto.
Wait
Mediante este método podemos mandar al usuario un mensaje de espera, este mensaje contiene una barra de progreso la cual avanza lentamente indicando que algo está sucediendo.Ext.get('wait').on('click',function(){
Ext.Msg.wait('Cargando... porfavor espere!');
},this);
Si dejamos así el código anterior el mensaje se quedará ahí por siempre ya que no tiene opción de cerrarse, esto sucede por que nosotros debemos cerrarlo manualmente mediante una instrucción, normalmente lo cerraríamos cuando el proceso que lanzamos ha terminado, por ahora simplemente voy a mandar un “timeout” para cerrar el mensaje después de 6 segundos.
Ext.get('wait').on('click',function(){
Ext.Msg.wait('Cargando... porfavor espere!');
window.setTimeout(function(){
Ext.Msg.hide();
},6000);
},this);
Es importante mencionar que el método “hide” cierra cualquier mensaje que se esté mostrando en ese momento.
Callbacks
Los métodos anteriores (excepto el wait) reciben como tercer parámetro una función, esta función será ejecutada cuando el usuario de clic en algún botón o cuando cierre el mensaje, esta función recibe como primer parámetro el botón al cual el usuario dio clic, y en el caso del método “prompt” recibe un segundo parámetro donde viene el texto que el usuario introdujo en la caja de texto, a continuación se muestra como podemos ejecutar ciertas instrucciones de acuerdo a lo que el usuario eligió en un mensaje de confirmación.Ext.get('confirm').on('click',function(){
Ext.Msg.confirm('Confirmación','¿Estas seguro de querer hacer esto?',function(btn){
if(btn === 'yes'){
//si el usuario aceptó
alert('Has aceptado los terminos!')
}else{
//si el usuario canceló
alert('El usuario cancelo')!
}
});
},this);
También podemos pasarle una función para ser ejecutada de la siguiente manera:
Ext.ns('com.quizzpot.tutorial');
com.quizzpot.tutorial.Msg = {
init: function(){
// código removido para mayor compresión…
Ext.get('confirm').on('click',function(){
Ext.Msg.confirm('Confirmación','¿Estas seguro de querer hacer esto?',this.callback);
},this);
// código removido para mayor compresión…
},
callback: function(txt){
alert(txt);
}
}
En el ejemplo anterior se creo una función dentro del objeto “Msg” la cual es invocada cuando el usuario da clic en algún botón del mensaje de confirmación.
Mensajes personalizados
Si necesitamos desplegar algún mensaje personalizado, por ejemplo cambiar el icono del mensaje o bien utilizar otros botones, entonces podemos hacerlo mediante el método “show” el cual recibe un objeto de configuración.Ext.get('custom').on('click',function(){
Ext.Msg.show({
title: 'Personalizado', //<- el título del diálogo
msg: 'Esto es un mensaje personalizado!', //<- El mensaje
buttons: Ext.Msg.YESNO, //<- Botones de SI y NO
icon: Ext.Msg.ERROR, // <- un ícono de error
fn: this.callback //<- la función que se ejecuta cuando se da clic
});
},this);
Este es un mensaje que tiene un ícono de error, existen otros íconos que podemos utilizar:
Ext.Msg.ERROR //Icono de error Ext.Msg.INFO //Icono de información Ext.Msg.WARNING //Icono de advertencia Ext.Msg.QUESTION //Icono de preguntaSi necesitamos mostrar algún otro ícono debemos crear una clase CSS para poner la imagen como background de la siguiente manera:
.profile{
background:transparent url(profile.png) no-repeat;
}
Luego de esto se le especifica el nombre de la clase a la propiedad ‘icon’.
Ext.Msg.show({
title: 'Personalizado',
msg: 'Este es un mensaje personalizado!',
buttons: Ext.Msg.YESNO,
icon: 'profile', // <- ícono personalizado
fn: this.callback
});
Conclusiones
Ext JS cuenta con estos métodos para comunicarse con el usuario los cuales podemos usarlos en lugar de los típicos “alert” o “confirm” que vienen por defecto con el explorador, permitiendo hacer los mensajes más llamativos.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
37Comentarios
excelente tutorial mi amigo!!!!
como siempre muy interesante el tuto ;)
Gracias por tu tiempo invertido, como siempre, sigue la calidad del curso.
hola no veo la hora de que este en el tema de aplicaciones adobe AIR con ext js :)
Hola Crysfel Una duda..., como puedo localizar los mensajes que yo muestro al usuario?. Vimos como localizar los del framework ExtJS, pero yo me refiero a los que usamos nosotros para interactuar con el usuario, por ejemplo los que has usado en este tema. Gracias y saludos. P.D.: Ánimo con el curso, es una pasada.
Existen diferentes soluciones para resolverlo, te voy a comentar como lo resolví yo en este sitio, hice un plugin para wordpress en el cual creo un "template tag" para que lo pueda utilizar en los archivos del template del sitio, dentro de esta función lo que hago es detectar el lenguage del navegador, luego busco en la base de datos mediante una llave (footer.social.twitter) el texto en el lenguaje seleccionado, si no hay traducción para ese lenguaje muestro el default (ingles), luego imprimo el respectivo texto, es importante mencionar que no debe haber textos "harcodeados" pues no serán traducidos, cuando quiero imprimir un texto lo hago así: <pre name="code" class="php"> <?php // en lugar de poner el título //directamente en el código, //voy por el a la DB dependiendo //del lenguaje seleccionado echo languageTranslator('header.blog.title'); ?> </pre> Ahora, si quieres utilizar esto con JavaScript, en este caso Ext JS, puedes crear un objeto donde donde por medio de Ajax solicite al servidor todos los textos necesarios para luego ser utilizados por los componentes. Lo hice de esta manera ya que algo así lo hace el Spring Framework que utilizo en mi trabajo, seguramente existen otras soluciones. saludos
Gracias Crysfel, investigaré más sobre el tema, por cierto, yo también uso Spring Framework :-), saludos.
para cuando el siguiente tuto? ;)
Pronto pronto... aunque será escrito porque no puedo hablar mucho en estos momentos :(
Muy buen post, estaba buscando el tema de los Ext.Msg.wait y aqui pude solucionarlo Se agradece. Saludos
Que honda podrias publicar un ejemplo para crear la aplicacion de tipo escritorio la he estudiado del ejemplo que esta en la api pero me confunden algunos terminos sale...
Una cosa, si es que quiero agrandar los message box y cambairles el color y el tamaño de la letra, cómo se hace? Sólo he logrado anchar el message box, porque sólo he encontrado el atributo minWidth. No he encontrado un atributo para el ancho (height).
Hola Iban, no hay una propiedad para el "height" porque se supone que crece mediante el contenido que tiene, tampoco nos permite cambiar los estilos del texto, lo que puedes hacer es revisar cuales son las clases CSS que se usan para darle formato al texto y sobreescribirlas usando los estilos que necesites ;) saludos
De verdad felicidades, me estoy desvelando, pero como estoy aprendiendo bastante. gracias por tu tiempo, va de mi parte una tasa de cafe.
Gracias por tus donativos :D Saludos
Muchas gracias por el tutorial muy bien explicado gracias por tomarte tu tiempo en hacerlo y demostrarlo me ayudo mucho le da un mejor aspecto a mis formulario de nuevo mil gracias
Hola todo parece muy bonito pero una ayuda toda esas funciones como las llamo desde un html o como hago para usarlas no me keda claro por fis gracias cualquier ayuda mi correo lobo2002610@hotmail.com GRACIAS DE VERDAD
Necesitas importar los archivos JS en tu documento, descarga el código fuente para que te des una idea mejor. Saludos
hola man , si ya me descarge todo me parece que no me funciona por la librerias q debe tener esas funciones para ser exactos esto: src="../ext-2.2/adapter/ext/ext-base.js"> src="../ext-2.2/ext-all.js" esos dos me parece q no encuentra y no hace nada solo tengo este: src="messages.js" y eso de importar a que te refieres gracias man
Necesitas descargar la librería de ExtJS y modificar las rutas adecuadamente: http://www.quizzpot.com/2009/02/instalacion-basica-del-framework/
Muy buen tutorial, te felicito, mi duda es y si necesitara colocar dos campos en el menssage custom?, como para un login, como podria hacer?
Utilizaras una ventana con un formulario dentro.
hola sabes hice todo lo que dice el tutrial , pero el boton custom no envia los valores al apretar el boton de echo muevo el mouse y desaparece el mensaje quien me puede ayudar
alguien me puede ayudar plis
Saludos amigo. Hace poco comence a trabajar con Extjs y entre el desarrollo me surgio la siguiente duda: Como hago para que en un mensaje se imprima el valor de un field-label que contendra bien sea un codigo o un nombre de un usuario. Gracias.
como puedo implementar este alert a mi proyecto es decir a mis funciones con mis variables
Saludos Crysfel muy buena ayuda nos has brindado con tus tutoriales, referente al tema de mensajes y alertas tengo una duda y no se si me puedas ayudar u orientar acerca de si exista ya alguna función que sea parte de la librería para cachar los errores como por ejemplo los errores de conexión a una base de datos, gracias de antemano y sigue mejorando cada día. Saludos.
muy bueno, solo quiero hacer algo diferente,vi en otras paginas web que hay veses sale un mensaje y dentro de unos segundos desaparece, como puedo hacer esto con Ext.Msg.alert ???? gracias
Saludos... Puedes ayudarme en un inconveniente. Lo que sucede es que estoy haciendo una aplicacion tipo desktop con extjs, el problema se me presenta con los messagebox, cuando tengo algunas ventanas abiertas el messagebox que queda detras de las ventanas, no se coloca delante, y al tratar de seleccionarla igualmente queda atras.
Exelente tutorial hermano a pesar del tiempo que tiene.. pero tengo una pregunta si quisiera lanzar el alert automaticamente validando un campo de un formulario en ves de hacerlo mendiante un boton...¿se podria?
Que tal con una duda, con respecto al wait, existe alguna diferencia entre window.setTimeout(function(){ ... y utilizar solo setTimeout(function(){ ...??? Saludos y gracias de antemano
Todas las funciones, variables definidas en el global scope pertenecen al objeto window, así que es exactamente lo mismo. Saludos
trato de realizar el ejemplo en mi pc... pero no me aparece los ejemplos como en la demostracion de esta pagina... no tengo las imagenes; por favor podria facilitarme un link para poder descargarme? se los agradeceria mucho
como pongo un icono superior en un mensaje es un error pero me muestra utro icono pequeño
Muy buen tutorial, pero tengo un problema, no me funcionan en el IE9, en Chrome y en Mozilla funcionan perfecto, pero en IE9 no funciona ninguno de los botones, se tiene que configurar algo??
Hola soy un seguidor de tu excelente blog, dado este codigo como puedo o mejor dicho donde implementar una condicion para que si dichos parametros no tienen valor valido mande un mensaje de error ya que la condicion que actualmente tiene, seria en el html, o donde. onBuscar : function() { var recibosStore = Ext.getStore('ingresos.registrarIngreso.GenerarReciboStore'); recibosStore.proxy.url = Namespace.namespace + 'ingreso/generarReciboIngreso/obtenerRecibos'; recibosStore.proxy.extraParams.cveIngreso = Ext.getCmp('numOperacion').getValue(); recibosStore.proxy.extraParams.cveConcepto = Ext.getCmp('cveConcepto').getValue(); recibosStore.proxy.extraParams.fechaRegistro = Ext.getCmp('fechaRegistro').getRawValue(); recibosStore.load({ callback:function() { if (recibosStore.getCount()==0){ Ext.Msg.show({ title : 'Recibo de Ingreso Federal', icon : Ext.Msg.INFO, msg : 'No hay datos para mostrar', buttons: Ext.Msg.OK }); } } });
sabras por que me envia este mensaje : ReferenceError: Ext is not defined Ext.ns('com.quizzpot.tutorial');