Diálogos

Esta clase nos permite generar mensajes emergentes de tres tipos: alertas, confirmación y de campo de texto.

Pero para que funcionen los avisos tenemos que precargar la clase Ext.MessageBox en el atributo requires de la aplicación (o de la clase o componente que lo utilice):

Ext.application({
    name: 'MiApp',
    requires: ['Ext.MessageBox'],
    launch: function() {
        ...
    }
});

Esto es necesario ya que de otra forma no funcionarán los avisos. En general se recomienda especificar en cada contenedor las clases que tiene que cargar, en general el propio sistema las carga en el momento en que las necesita, pero en algunas ocasiones (como en esta) si no se precargan pueden aparecer errores.

A continuación veremos los diferentes tipos de aviso que podemos usar.

Alertas

Muestra un mensaje de aviso con un solo botón OK, como podemos ver en la imagen siguiente:

Para crear una ventana de aviso usamos el constructor Ext.Msg.alert(title,msg,function), el primer parámetro es el título de la ventana, el segundo es el mensaje de aviso que aparecerá en el centro de la ventana, y el último es la función callback que se llamará una vez cerrada la ventana. Por ejemplo:

Ext.Msg.alert('Titulo', 'Mensaje de aviso', Ext.emptyFn);

En este caso usamos la función vacía Ext.emptyFn para que no se ejecute nada. En su lugar podríamos haber puesto directamente el nombre de una función a llamar.

Confirmación

Este mensaje de aviso nos da la opción de aceptar o rechazar, como podemos ver en la siguiente imagen:

En este caso utilizamos el constructor Ext.Msg.confirm(title,msg,function), los parámetros serán los mismos: título, mensaje y función. En este caso sí que nos interesa indicar el nombre de una función para poder comprobar si se ha pulsado el botón OK. La función callback recibirá un único parámetro cuyo valor será el texto del botón pulsado.

function myFunction(btn)
{
  if( btn == "yes" )
    Ext.Msg.alert( "¡Ha pulsado sí! :D" );
  else
    Ext.Msg.alert( "Ha pulsado no :(" );
}

Ext.Msg.confirm( "Confirmation", "Are you sure you want to do that?", myFunction );

Prompt, solicitar datos

El diálogo tipo prompt sirve para solicitar un dato al usuario, consiste en una pequeña ventana con un campo de texto que se puede aceptar o rechazar:

Utilizamos el constructor Ext.Msg.prompt(title,msg,function) con los parámetros: título, mensaje y función. En este caso la función callback recibirá dos parámetros: el botón pulsado y el texto introducido.

function myFunction(btn, text)
{
  Ext.Msg.alert( btn + ' ' + text );
}

Ext.Msg.prompt('Name', 'Please enter your name:', myFunction );