# 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: ```javascript 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. \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_q09lcqJFZRW_Sd%2Fsencha_forms_text.jpg?generation=1577179069785334\&alt=media) * **textareafield**: área de texto. \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_q2oWkaC2yTmzT8%2Fsencha_forms_textarea.jpg?generation=1577179062002085\&alt=media) * **passwordfield**: campo de texto para introducir contraseñas. El código es igual que para un *textfield* pero cambiando el valor de "`xtype: 'passwordfield'`": \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_q4vDIVbJQ0yrJy%2Fsencha_forms_password.jpg?generation=1577179062311685\&alt=media) * **urlfield**: campo de texto para direcciones Web, incluye validación de URL correcta: \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_q6k1qL8m1GnG-N%2Fsencha_forms_urlfield.jpg?generation=1577179061494945\&alt=media) * **emailfield**: campo de texto para introducir e-mails, incluye validación automática: \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_q8xjCrUV3mLG3y%2Fsencha_forms_email.jpg?generation=1577179061814929\&alt=media) * **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: \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qAZI22ZhsRZ1uY%2Fsencha_forms_toggle.jpg?generation=1577179062440320\&alt=media) * **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`": \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qCFP6SyoaNGdQJ%2Fsencha_forms_number.jpg?generation=1577179062183794\&alt=media) * **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`". \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qEKaDED-Ggz2w6%2Fsencha_forms_spinner.jpg?generation=1577179061903981\&alt=media) * **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`". \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qG_Ye8dwWhsA_q%2Fsencha_forms_slider.jpg?generation=1577179061691916\&alt=media) * **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}`": \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qIzA9wI7AMY38y%2Fsencha_forms_datepicker.jpg?generation=1577179062750668\&alt=media) * **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:
```javascript 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: \ ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qK9-QOQXunmJEV%2Fsencha_forms_fieldset.jpg?generation=1577179061409797\&alt=media) * **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). ```javascript 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: ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qMwhGVmoQ-GAPX%2Fsencha_forms_selectfield.jpg?generation=1577179062210842\&alt=media) * **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: ```javascript 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*): ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qOa-Urnf3y5h4W%2Fsencha_forms_checkbox.jpg?generation=1577179061661232\&alt=media) * **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: ```javascript 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*): ![](https://3734499502-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJyCfFGsVYAl7sb7%2F-LwrBLW8USdubDXH6gl2%2F-LwrB_qQ2Qq8OY4LMgAR%2Fsencha_forms_radio.jpg?generation=1577179062588119\&alt=media) 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`".