Formularios

Para crear formularios utilizamos el constructor Ext.create('Ext.form.Panel', { ... });, el cual se comporta exactamente igual que un panel, pero permitiendo añadir fácilmente en el array "items" campos de tipo formulario. En el siguiente ejemplo se crea un formulario que contiene un campo de texto y un área de texto:

Ext.application({
    name: 'MiApp',
    launch: function() {
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
            items: [
                {
                    xtype: 'textfield',
                    name: 'title',
                    label: 'Title',
                    required: true
                },
                {
                    xtype: 'textareafield',
                    name: 'narrative',
                    label: 'Narrative'
                }
            ]
        });
    }
});

Tipos de campos

Para todos los campos podemos especificar un nombre "name", una etiqueta "label" y si es requerido "required: true" (esta propiedad solo es visual, añade un asterisco (*) en el nombre del campo, pero no realiza ninguna validación).

El nombre (name) se utiliza para cargar y enviar los datos del formulario (como veremos más adelante), y la etiqueta (label) se mostrará visualmente en la parte izquierda de cada campo. El valor de todos los campos se encuentra en su atributo "value", el cual también podemos utilizarlo para especificar un valor inicial.

Los principales tipos de campos que podemos utilizar son los siguientes (indicados según su nombre "xtype" en negrita):

• textfield: campo de texto.
• textareafield: área de texto.
• passwordfield: campo de texto para introducir contraseñas. El código es igual que para un textfield pero cambiando el valor de "xtype: 'passwordfield'":
• urlfield: campo de texto para direcciones Web, incluye validación de URL correcta:
• emailfield: campo de texto para introducir e-mails, incluye validación automática:
• togglefield: permite seleccionar entre dos valores (0 ó 1). Por defecto se encuentra desactivado, para activarlo por defecto tenemos que añadir "value:1" a la definición del campo:
• numberfield: campo numérico, permite introducir el número manualmente o mediante las flechas laterales. Inicialmente no contiene ningún valor, pero podemos definir un valor inicial mediante la propiedad "value: 20":
• spinnerfield: campo numérico, permite introducir el número manualmente o mediante los botones laterales. Inicialmente su valor es 0. Podemos definir un valor inicial mediante la propiedad "value: 20". También podemos definir un valor mínimo "minValue: 0", un valor máximo "maxValue: 100", el incremento "incrementValue: 2" y si se permiten ciclos "cycle: true".
• sliderfield: campo numérico modificable mediante una barra o slider. Inicialmente su valor es 0. Podemos definir un valor inicial mediante la propiedad "value: 50". También podemos definir un valor mínimo "minValue: 0", un valor máximo "maxValue: 100" y el incremento "incrementValue: 2".
• datepickerfield: campo para seleccionar fechas. Al pulsar sobre el campo aparece una ventana en la que podemos seleccionar fácilmente una fecha. Podemos indicarle una fecha inicial utilizando "value: {year: 1989, day: 1, month: 5}":
• fieldset: Este elemento en realidad no es un campo de datos, sino un contenedor. No añade ninguna funcionalidad, simplemente pone un título (opcional), y agrupa elementos similares, de la forma:

  items: [{
  xtype: 'fieldset',
  title: 'About Me',
  items: [
    { xtype: 'textfield', name : 'firstName', label: 'First Name' },
    { xtype: 'textfield', name : 'lastName', label: 'Last Name'}
  ]
  }]

  Con lo que obtendríamos un resultado similar a:
• selectfield: campo desplegable para seleccionar entre una lista de valores. Las posibles opciones se indican en la propiedad "options" como un array. Para cada opción tenemos que indicar sus valores text (texto que se mostrará) y value (valor devuelto para la opción seleccionada).

  items:[{
  xtype: 'selectfield',
  label: 'Select',
  options: [
    {text: 'First Option',  value: 'first'},
    {text: 'Second Option', value: 'second'},
    {text: 'Third Option',  value: 'third'}
  ]
  }]

  Con lo que obtendríamos un resultados como el siguiente:

  
• checkboxfield: el campo checkbox nos permite elegir uno o varios elementos de una lista. Cada campo de la lista se tiene que declarar como un item independiente, pero todos ellos deben de tener el mismo nombre "name" para poder ser agrupados (muy importante para posteriormente poder recoger los datos correctamente). Además podemos utilizar la propiedad "checked: true" para que aparezcan marcados inicialmente:

  items: [
  {
    xtype: 'checkboxfield',
    name : 'check_color',  // Nombre del grupo
    value: 'red',
    label: 'Red',
    checked: true
  }, {
    xtype: 'checkboxfield',
    name : 'check_color',
    value: 'green',
    label: 'Green'
  }, {
    xtype: 'checkboxfield',
    name : 'check_color',
    value: 'blue',
    label: 'Blue'
  }
  ]

  Con lo que obtendríamos un resultado como el siguiente (en la imagen se han agrupado además dentro de un fieldset):

  
• radiofield: el campo de tipo "radio" nos permite elegir solo un elemento de una lista. Cada campo de la lista se tiene que declarar como un item independiente, pero todos ellos deben de tener el mismo nombre "name" para poder ser agrupados (muy importante para posteriormente poder recoger los datos correctamente). Además podemos utilizar la propiedad "checked: true" en uno de ellos para que aparezca marcado inicialmente:

  items: [
  {
    xtype: 'radiofield',
    name : 'radio_color',  // Nombre del grupo
    value: 'red',
    label: 'Red',
    checked: true
  }, {
    xtype: 'radiofield',
    name : 'radio_color',
    value: 'green',
    label: 'Green'
  }, {
    xtype: 'radiofield',
    name : 'radio_color',
    value: 'blue',
    label: 'Blue'
  }
  ]

  Con lo que obtendríamos un resultado similar a (en la imagen se han agrupado además dentro de un fieldset):

  

También podemos instanciar los campos de un formulario de forma independiente utilizando su constructor, por ejemplo para el campo de "textfield" sería "Ext.form.Text", o para el campo "togglefield" sería "Ext.form.Toggle". En general el constructor tendrá el mismo nombre que su tipo "xtype" empezando por mayúscula y quitando el sufijo "field".