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

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

![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrBaU4s3PAE5gTdoMX%2Fsencha_alert.jpg?generation=1577179066010211\&alt=media)

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:

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

![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrBaU6-i7RQwIe1nHw%2Fsencha_confirm.jpg?generation=1577179065812961\&alt=media)

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.

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

![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrBaU84O6T9MRZiwgK%2Fsencha_prompt.jpg?generation=1577179065917826\&alt=media)

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.

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

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