Formularios y campos comunes en Ext JS
Jun 01, 2009 | Español | By José Armando | 53 Comments | Read in EnglishEntre los múltiples tipos de paneles que nos ofrece Ext JS, tenemos el componente Ext.FormPanel, un componente que nos proporciona toda la funcionalidad de un formulario común en HTML pero con métodos y funcionalidades propias de ExtJS.
Author: José Armando
Es Ingeniero en Computación egresado de la Universidad Tecnológica de la Mixteca. Se dedica a desarrollar aplicaciones web con tecnologías como Extjs, Cappuccino en el front-end y Php o Java en el back-end.
El componente Ext.FormPanel tiene un tipo de diseño (“layout”) por defecto tipo “form”, este tipo de diseño alinea de una manera inteligente cada uno de los componentes (etiqueta-componente) del formulario. La característica única de los Ext.FormPanel es que ya tiene implementado el guardado y cargado de datos de una manera segura y totalmente configurable.
Material de apoyo
Ahora descargamos el material de apoyo, descomprimimos su contenido, creamos una carpeta que se llame “formularios” dentro de la carpeta “curso” en la cual hemos estado trabajando, luego copiamos los archivos que descomprimimos anteriormente.
Recuerden que este código lo vamos a ocupar durante todo el tema de “Formularios” así que en los tutoriales siguientes agregaremos líneas a este código para añadirle funcionalidad a nuestro formulario además de que estamos utilizando la versión 3.0 del Framework de Ext JS.
El objetivo es que al final del tema “Formularios”, tengamos un formulario funcionando correctamente con todas las funcionalidades y validaciones correspondientes.
Empaquetando el tutorial
Vamos a empaquetar el código para evitar conflictos con otras variables.
Ext.ns('com.quizzpot.tutorial');
Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';
com.quizzpot.tutorial.FormTutorial = {
init: function(){
//Aquí va el código del tutorial
}
}
Ext.onReady(com.quizzpot.tutorial.FormTutorial.init,com.quizzpot.tutorial.FormTutorial);
Formulario
A continuación vamos a construir un formulario con los campos más utilizados; dos campos de texto, un grupo de checkbox, un campo oculto, un grupo de radiobuttons y dos botones.
Primero necesitamos crear un formulario donde se alojarán los campos para que el usuario capture la información necesaria, esto lo hacemos de la siguiente manera:
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'}, //componente por defecto del formulario
bodyStyle:'padding: 10px', //alejamos los componentes del formulario de los bordes
html: 'This form is empty!' //<-- en el siguiente paso vamos a quitar esta propiedad
});
Los formularios heredan las propiedades y métodos del componente "Ext.Panel" por lo tanto la configuración que hemos realizado ya es conocida por nosotros, si no es así te invito a darle un repaso al tema de los paneles.
El código anterior genera la siguiente pantalla:
Un formulario vacio
Hasta este punto no hay diferencia visual entre un formulario y un panel, esto es porque aún no le hemos agregado ningún campo, vamos a ver detalladamente los componentes más comunes a continuación.
Campos de texto
Como hemos visto, en temas anteriores, podemos crear los componentes utilizando la palabra reservada "new" seguido del componente que necesitamos instanciar, o bien podemos crearlos mediante objetos de configuración utilizando la propiedad "xtype" para distinguir entre los componentes disponibles. El componente que nos permite crear cajas de texto es el "Ext.form.TextField" y su "xtype" es "textfield", por ejemplo:
//creamos una instancia del textfield
var name = new Ext.form.TextField({
fieldLabel:'Name',
name:'txt-name',
emptyText:'Your name...',
id:"id-name"
});
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'}, //componente por defecto del formulario
bodyStyle:'padding: 10px', //alejamos los componentes del formulario de los bordes
items:[
name, // le asignamos la instancia que creamos anteriormente
{
fieldLabel:'Email', // creamos un campo
name:'txt-email', // a partir de una
value:'default@quizzpot.com', //configuración
id:"id-email"
}
]
});
En el código anterior se han creado dos campos de texto de dos maneras distintas, una utilizando una instancia del componente TextField y la otra usando un objeto de configuración, cada desarrollador puede elegir la opción que más le convenga dependiendo las circunstancias.
Campos de texto
A continuación voy a mencionar las propiedades que utilizamos:
"fieldLabel": esta propiedad define el texto que acompaña a cada componente del formulario.
"emptyText": esta propiedad define el texto que contendrá el campo cuando se encuentra vacío.
"name": es el nombre con el cual se envían los datos que contiene el campo al servidor, es exactamente igual al "name" que estamos acostumbrados a usar en formularios comunes.
"value": es el valor por defecto con que aparece en el componente, útil para cuando queremos editar un registro y mostrar la información que actualmente está capturada.
Checkbox
Los checkboxes son utilizados para seleccionar uno o varios items de una lista, o simplemente para activar o desactivar alguna bandera o permiso en un sistema, para este ejemplo voy a poner un campo que se llame “activo” utilizando un objeto de configuración, también podemos crear una instancia utilizando el componente “Ext.form.Checkbox”:
// codigo removido por cuestiones de simplicidad...
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default@quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox', //definimos el tipo de componente
fieldLabel: 'Active',// le asignamos un label
name: 'chk-active', //y un "name" para que lo recojamos en el servidor...
id: 'id-active'// ...cuando el formulario sea enviado
}
]
});
Por otro lado cuando queremos agrupar varios checkboxes necesitamos utilizar el componente “Ext.form.CheckboxGroup” el cual permite manipular de una forma sencilla cualquier cantidad de checkboxes.
//creamos un grupo de checkboxes
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Interests',
columns:2,//mostrar dos columnas de checkboxes
items:[
{boxLabel: 'JavaScript', name: 'cb-js', checked: true}, //campo marcado desde el principio
{boxLabel: 'HTML', name: 'cb-html'},
{boxLabel: 'CSS', name: 'cb-css'},
{boxLabel: 'Otros', name: 'cb-otros'}
]
});
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default@quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox', //definimos el tipo de componente
fieldLabel: 'Active',// le asignamos un label
name: 'chk-active',//y un "name" para que lo recojamos en el servidor...
id: 'id-active'// ...cuando el formulario sea enviado
},
checkboxes //<-- grupo de checkboxes
]
});
Checkboxes con Ext JS
Los grupos de checkboxes aceptan la propiedad “items” la cual debe contener un arreglo de objetos de configuración para checkbox o instancias del checkbox.
Radiobuttons
Los radiobutton son usados para seleccionar una sola opción de varios items, este componente se crea muy semejante a los checkboxes, solo que usamos el componente “Ext.form.RadioGroup” para agrupar varios radios.
//código removido por cuestiones de simplicidad
//creamos un grupo de opciones con radiobuttons
var radios = new Ext.form.RadioGroup({
fieldLabel: 'Favorite Framework',
columns: 2, //muestra los radiobuttons en dos columnas
items: [
{boxLabel: 'Ext Js', name: 'framework', inputValue: 'Ext js', checked: true},
{boxLabel: 'Dojo', name: 'framework', inputValue: 'Dojo'},
{boxLabel: 'Mootools', name: 'framework', inputValue: 'Mootools'},
{boxLabel: 'jQuery', name: 'framework', inputValue: 'jQUery'},
{boxLabel: 'prototype', name: 'framework', inputValue: 'prototype'},
{boxLabel: 'YIU', name: 'framework', inputValue: 'yui'}
]
});
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default@quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'chk-active',
id: 'id-active'
},
checkboxes,
radios // <-- grupo de radios
]
});
Grupo de Radiobuttons
Normalmente los radios son usados en conjunto, pero si por alguna extraña razón necesitas solamente uno o en lugar de usar objetos de configuración en la propiedad “items” del RadioGroup quieres poner instancias, puedes utilizar el componente “Ext.form.Radio”.
Campos ocultos
Los campos ocultos nos sirven para enviar información al servidor que el usuario no le interesa saber, por ejemplo algún “id” del registro que se esta editando, o algún token de seguridad, etc. Ext JS cuenta con el componente “Ext.form.Hidden” el cual nos permite lograr esta funcionalidad.
//código removido por cuestiones de simplicidad
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default@quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'chk-active',
id: 'id-active'
},
checkboxes,
radios,
{
xtype:'hidden',//<-- campo oculto (hidden)
name:'h-type', //el nombre con que se envia al servidor
value:'developer'//el valor que contendrá
}
]
});
Es de suma importancia definir la propiedad “name” así como la propiedad “value” para asignarle el contenido a la variable que será enviada al servidor, adicionalmente podemos asignarle un “id” para que podamos modificar el valor del campo de una manera sencilla más adelante.
Botones en el formulario
Podemos asignarle botones al formulario para que al ser presionados realicen las acciones correspondientes, por ahora únicamente voy a crear los botones sin ninguna acción.
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default@quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'chk-active',
id: 'id-active'
},
checkboxes,
radios,
{
xtype:'hidden',
name:'h-type',
value:'developer'
}
],
buttons:[{text:'Save'},{text:'Cancel'}] //<-- botones del formulario
});
Botones en un formulario
Podemos alinear la posición de los botones a la derecha, izquierda o al centro, por defecto están alineados al centro, pero mediante la propiedad “buttonAlign” podemos definir el lugar donde aparecerán los botones, para alinearlos a la derecha haríamos los siguiente:
//creamos un formulario
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default@quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'chk-active',
id: 'id-active'
},
checkboxes,
radios,
{
xtype:'hidden',
name:'h-type',
value:'developer'
}
],
buttonAlign: 'right', //<--botones alineados a la derecha
buttons:[{text:'Save'},{text:'Cancel'}] //botones del formulario
});
Botones alineados a la derecha
Ventana que alojara el formulario
Solo por cuestiones visuales, vamos a ocupar una ventana para alojar nuestro formulario ahí, así que es necesario quitar la propiedad “renderTo: 'frame'” e insertar el formulario dentro de la ventana que crearemos, también vamos a mover los botones a la ventana, el título y el estilo del body de la siguiente manera:
//creamos un formulario
this.form= new Ext.FormPanel({
border:false, // <-- Le quitamos el borde al formulario
defaults:{xtype:'textfield'}, //componente por default del formulario
items:[
name, // le asignamos la instancia que creamos anteriormente
{
fieldLabel:'Email', // creamos un campo
name:'txt-email', // a partir de una
value:'default@quizzpot.com', //configuración
id:"id-email"
},{
xtype: 'checkbox', //definimos el tipo de componente
fieldLabel: 'Active',// le asignamos un label
name: 'chk-active',//y un "name" para que lo recojamos en el servidor...
id: 'id-active'// ...cuando el formulario sea enviado
},
checkboxes, //grupo de checkboxes
radios, // grupo de radios
{
xtype:'hidden',//campo oculto (hidden)
name:'h-type', //el nombre con que se envia al servidor
value:'developer'//el valor que contendrá
}
]
});
//creamos la ventana que contendrá el formulario
var win = new Ext.Window({
title: 'New Developer',
width:300,
height:300,
bodyStyle:'background-color:#fff;padding: 10px',
items:this.form, //le asignamos el formulario solamente
buttonAlign: 'right', //botones alineados a la derecha
buttons:[{text:'Save'},{text:'Cancel'}] //botones del formulario
});
win.show();
Ventana con un formulario
Conclusiones
El día de hoy hemos visto como crear un formulario de manera muy fácil y sencilla, el código completo lo puedes descargar en la parte superior derecha de esta página, en el próximo tutorial veremos cómo añadirle un combo box con datos cargados de manera local y remota a nuestro formulario, y también le agregaremos algunos campos más que nos proporciona Ext JS.
No olviden dejar sus dudas, comentarios o sugerencias aquí o pueden registrarse en el foro para tener una mejor conversación.
, me alegra ver que la estructuraste mejor y le agregaste algunos detalles, bueno yo soy el usuario Manduks en el foro, mas corto … saludos a todos y espero que les guste (y)
Commercial ExtJs and Sencha Touch Themes
Este tutorial fué realizado con la ayuda de Jose Armando (@manduks), agradecemos tu apoyo