Geek & Roll

Ext 2.0 es una gran librería de propósito general para JavaScript. Nos sirve tanto para efectos, como para GUI y lo que se necesite para construir aplicaciones Web bonitas, consistentes entre navegadores y con llamadas asíncronas al servidor de manera rápida y más sencilla que “a mano”.

Lo que vamos a ver ahora es cómo construir un formulario, validarlo, y enviarlo al servidor. Ya antes vimos como llenar un formulario automáticamente con datos que vienen del servidor, pues lo que vamos a hacer ahora es lo contrario: el usuario llena el formulario y nosotros lo enviamos al servidor para ser procesado y guardado. Es más fácil de lo que parece, veamos:

Primero necesitamos una ventana en donde poner la forma. Estrictamente hablando, podemos poner la forma en cualquier componente contenedor, es sólo que tener una ventana especial para la forma es más fácil de integrar a una aplicación ya existente. Para crear una ventana nueva no podía ser más sencillo:


var sendMsgWin = new Ext.Window({
animateTarget: "ventanaEmergente",
autoHeight: true,
border: true,
closable: true,
constrain: true,
constrainHeader: true,
modal: true,
resizable: false,
shadow: true,
title: "Nueva Ventana Emergente",
width: "600px",
items: [messageForm]
});
sendMsgWin.show();


El estilo del código es bastante consistente con el resto de Ext y creo que las opciones se explican solas, pero vamos a repasarlo un poco. El constructor Ext.Window acepta como parámetro un objeto de configuracion (es lo que está entre llaves) que lleva algunos datos en formato clave:valor y de esta manera configuramos nuestra ventana. Al final tenemos la clave “items” la cual lleva como valor un arreglo de elementos (y por eso los corchetes) que formarán parte de la ventana, y es ahí donde le pasamos nuestro formulario como único valor (más de eso más adelante, por ahora es importante mencionar que podríamos pasarle más de un elemento separándolos por comas así: [elem1, elem2, elem3 ... elemn]). Por último mostramos la ventana con su método show.

Pero antes de que el código anterior funcione, hay que construir el formulario, es decir, esa variable messageForm que estamos pasando como argumento a items. Ext nos proporciona una clase, Ext.FormPanel, que como su nombre nos indica es un panel con un formulario incluido, perfecto para nuestros propósitos. Primero inicializamos el “QuickTips” que nos da indicadores visuales para ciertos eventos de validación de la forma, como si un campo requerido no es llenado, si se esta pasando del máximo de caracteres aceptados, entre otros. Veamos el código:


Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side'


Nada especial aquí, eso básicamente siempre va a ser igual. Ahora sí, a construir el FormPanel y por tanto, nuestro formulario. La clase FormPanel acepta también un objeto de configuración en su constructor con distintos datos en formato clave:valor. Veamos el código relevante:


var messageForm = new Ext.FormPanel({
frame:true,
bodyStyle:'padding:1px 1px 0',
width: '600px',
buttonAlign: 'center',
labelAlign: 'right',


Sólo son opciones de configuración que afectan el estilo visual del FormPanel, para ver las opciones completas los dirijo al centro de documentación de Ext. A continuación y de manera similar al constructor de Ext.Window, el objeto de configuración para Ext.FormPanel acepta un dato items que recibe como valor un arreglo de componentes que formarán parte del FormPanel y es ahí donde le vamos a pasar el formulario en cuestión. Después, el objeto de configuración también acepta otro dato llamado “buttons” que como valor espera un arreglo de botones. Veamos:


var messageForm = new Ext.FormPanel({
frame:true,
bodyStyle:'padding:1px 1px 0',
width: '600px',
buttonAlign: 'center',
labelAlign: 'right',
items: [],
buttons: []
});


Ahí entre el par de corchetes vacíos de items es donde vamos a definir los componentes que formarán parte del formulario. No, no se confundan, no es par el que no puede… ah no, ese es otro comercial. No se confundan, la jerarquía de elementos va algo así:

Ventana –> FormPanel –> Formulario –> Componentes del formulario

Cada flecha del diagrama anterior representa un arreglo “items” que tenemos que llenar. En el primero le pasamos el FormPanel que construimos, en el segundo le pasaremos el formulario y al tercero ahora si le pasaremos los componentes. Veamos:


items: [{
xtype: 'fieldset',
autoHeight: true,
defaultType: 'textfield',
items: []
]
}],


Al arreglo “items” del FormPanel le estamos pasando otro objeto de configuración, esta vez del formulario. Con su xtype le decimos que es un “fieldset” es decir, un conjunto de campos, así como también que el tipo de campo por defecto es un campo de texto. El xtype es una cadena que identifica el tipo de objeto que es. El nuevo arreglo “items” vacío es en donde pondremos los campos del formulario, de la misma manera que llenamos el arreglo “items” anterior:


items: [{
fieldLabel: 'Nombre',
name: 'nombre',
id: 'nombre',
allowBlank: false,
blankText: "El campo nombre es requerido",
maxLength: 25,
maxLengthText: "El numero de caracteres máximo es de 25",
width: '410px'
},
{
fieldLabel: 'Apellido',
name: 'apellido',
id: 'apellido',
allowBlank: false,
blankText: "El campo Apellido es requerido",
maxLength: 25,
maxLegthText: "El numero de caracteres máximo es de 25",
width: '410px'
},
{
xtype: 'textarea',
fieldLabel: 'Dirección',
name: 'direccion',
id: 'direccion',
allowBlank: false,
blankText: "El campo direccion es requerido",
maxLength: 255,
maxLengthText: "El numero máximo de caracteres es 255",
width: '410px'
}]


El código es bastante explícito, podemos ver como funcionan algunas de las opciones como por ejemplo allowBlank y maxLength para hacer cierto tipo de validación. También se pueden usar expresiones regulares para validar cosas como correos electrónicos, números de teléfono y cualquier cosa para la que se puedan armar una expresión regular. Los campos “name” y “id” se mapean directamente a su equivalente en HTML y son importantes a la hora de enviar los datos al servidor, así como también al obtener los datos regresados por el servidor. Vemos como también no es necesario especificar el xtype para los dos primeros campos porque es el default (textfield) sin embargo en el último especificamos un textarea. Para ver todos los posibles tipos de valores xtype tienen que consultar la documentación de Ext.

Por último queda el arreglo “buttons”:


buttons: [{
text: 'Enviar',
handler: function(){
if(messageForm.getForm().isValid()){
messageForm.getForm().submit({
url:'submitForm.php',
success: function(form, action){
Ext.Msg.alert("¡Éxito!","Mensaje de éxito");
},
failure: function(form, action){
Ext.Msg.alert("¡Ups!","Error");
}
});
}else{
//lo que pasa si la forma no es válida
}
]


Estos son los botones que van en el FormPanel, y nosotros ponemos uno para enviar la forma al servidor. Lo importante es la llamada messageForm.getForm().submit que le indica al formulario realizar la acción “submit” y este automáticamente envía los datos al servidor por el método por default (POST) si no se indica lo contrario. La forma incluye todos sus campos como parámetros para el servidor, y ahí es donde entra la importancia de su parámetro “name” ya que así se identificarán del lado del servidor.

Hasta aquí la dejamos, esperen la segunda parte para ver lo que ocurre del lado del servidor y la respuesta. Hagan buen uso de la caja de comentarios y manden eso que están pensando.