Blog

En los temas anteriores vimos como cargar un formulario con información en sus campos, ya sea al seleccionar una fila de un Grid o solicitando la información al servidor; en este tema mostraré como hacer un “submit” al formulario para enviar la información al servidor y de esta forma guardarla o procesarla a nuestro antojo.

Material de apoyo

Para continuar con este tutorial es necesario descargar el material de apoyo, el cual contiene un HTML que incluye un archivo JS en el cual he creado un formulario contenido en una ventana y un archivo PHP el cual procesará la información enviada.

Demostración

He creado una demostración del ejercicio que vamos a realizar, te recomiendo ir a probar su funcionalidad, es algo muy sencillo pero explica perfectamente el punto que estudiaremos.

Submit tradicional

Si queremos hacer un “submit” común y corriente, es decir, sin utilizar Ajax y que toda la página se recargue, solo debemos configurar la propiedad “standardSubmit: true”, por defecto está en “false”.

Si abrimos el archivo “submitform.js”, del material de apoyo, veremos el siguiente código en el método “init”:

this.form = new Ext.form.FormPanel({
	standardSubmit: true, // traditional submit
	url: 'submitform.php',
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Title',name:'title', allowBlank:false},
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

this.win = new Ext.Window({
	id:'mywin',
	title: 'Submit data to the Server',
	bodyStyle: 'padding:10px;background-color:#fff;',
	width:300,
	height:270,
	items:[this.form],
	buttons: [{text:'Save'},{text:'Cancel'}]
});

this.win.show();

Ese código lo hemos estudiado ya varias veces, por lo tanto asumo que lo conoces a la perfección; si has notado la primera configuración es “standardSubmit: true”, esta es la única diferencia con respecto a los formularios que creamos anteriormente en este curso y nos permite hacer un “submit” tradicional.

Hacer el submit con el botón save

Hasta ahora los botones no hacen absolutamente nada, solamente están ahí de adorno, lo que tenemos que hacer es asignarle un “handler” para hacerlos funcionar y en este caso asignarle el “scope” que vamos a usar, con esto en mente cambiamos el código del botón por algo semejante a lo siguiente:

{text:'Save',handler:this.sendData,scope:this}

Ahora tenemos que implementar la función “sendData” para que hagamos el “submit”.

sendData: function(){
	//submit the form
	this.form.getForm().submit();
}

Si has notado usamos el método “getForm()” y a éste le hacemos “submit()”. El componente “FormPanel” contiene otro componente llamado “BasicForm” el cual es el responsable de manejar las funcionalidades básicas de un formulario como la información de los campos, enviar la información al servidor, resetear los campos, validaciones, etc. A su vez el “FormPanel” es un contenedor el cual se encarga de manejar el “layout”, asignarle un título y desplegarlo en forma de un “Panel” o asignarlo a otros componentes.

Si en este momento damos clic sobre el botón “save” veremos como se recarga completamente la página.

Hacer un submit utilizando Ajax

Creo que esta es la parte que a todos nos interesa, vamos a ver como podemos enviar la información utilizando Ajax. Lo primero que necesitamos hacer es quitar la configuración “standardSubmit: true” del formulario.

this.form = new Ext.form.FormPanel({
	//standardSubmit: true, // remove this property
	url: 'submitform.php',
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Title',name:'title', allowBlank:false},
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

Esto es suficiente para lograr nuestro objetivo, si probamos el ejemplo en este momento podemos ver en la consola de Firebug que se están mandando los parámetros correctamente utilizando el método “POST”.

Personalizar el envío

En ocasiones es necesario cambiar el método de envío que está por defecto (POST) por algún otro, en este caso debemos especificar el que necesitemos (GET, PUT, DELETE, OPTIONS), también vamos a enviar un mensaje si se grabó satisfactoriamente la información o si se ocasionó un error.

this.form.getForm().submit({
	method: 'put',
	success: function(form,action){
		Ext.Msg.alert('Success',action.result.msg);
	},
	failure: function(form,action){
		switch (action.failureType) {
			  case Ext.form.Action.CLIENT_INVALID:
				 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
				 break;
			  case Ext.form.Action.CONNECT_FAILURE:
				 Ext.Msg.alert('Failure', 'Ajax communication failed');
				 break;
			  case Ext.form.Action.SERVER_INVALID:
				Ext.Msg.alert('Failure', action.result.msg);
				break;
			  default:
				Ext.Msg.alert('Failure',action.result.msg);
		  }
	}
});

En este ejemplo utilizamos el método “PUT” para crear un nuevo registro en la base de datos, ¿por qué PUT y no POST? Más adelante hablaré sobre esta técnica llamada “REST” la cual nos especifica que usemos los diferentes métodos que existen para interactuar con el servidor así como también identificar los códigos de “status” en sus respuestas.

La propiedad “success” nos permite configurar una función que se ejecutará si todo salió como esperábamos, en este caso solamente mandamos un mensaje de éxito:

Por otro lado la propiedad “failure” nos permite configurar una función a ejecutar para cuando se ocasione un error en el servidor.

¿Quién decide cuando se ejecuta cada método? ¡Excelente pregunta! Actualmente el componente “FormPanel” espera que la respuesta del servidor contenga la propiedad “success”, esta propiedad es la que decide cual método se ejecutará, si viene con “true” se ejecuta la función configurada en “success” y si viene en “false” se ejecuta la función configurada en la propiedad “failure”.

{
"success":true,
"msg":"Message example"
}

También se ejecuta la función “failure” cuando no se puede establecer la comunicación con el servidor o se ha ocasionado un error en la validación del formulario.

Parámetros extra

A veces es necesario mandar parámetros extras al servidor, para esto solamente necesitamos configurar la propiedad “params” en las opciones del submit.

this.form.getForm().submit({
	method: 'put',
	params: {
		extraParam: 'Extra params!',
		param2: 'Param 2'
		},
	success: function(form,action){
		Ext.Msg.alert('Success',action.result.msg);
	},
	failure: function(form,action){
		switch (action.failureType) {
			  case Ext.form.Action.CLIENT_INVALID:
				 Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
				 break;
			  case Ext.form.Action.CONNECT_FAILURE:
				 Ext.Msg.alert('Failure', 'Ajax communication failed');
				 break;
			  case Ext.form.Action.SERVER_INVALID:
				Ext.Msg.alert('Failure', action.result.msg);
				break;
			  default:
				Ext.Msg.alert('Failure',action.result.msg);
		  }
	}
});

Mensaje cargando

Para finalizar voy a mostrar como podemos enmascarar la ventana y mostrar un mensaje indicando al usuario que la información esta siendo enviada.

Primero necesitamos crear la mascara y mostrarla antes de realizar el submit.

var mask = new Ext.LoadMask(Ext.get('mywin'), {msg:'Saving. Please wait...'});
mask.show();

El componente “Ext.LoadMask” crea una mascara para un elemento dado, en este caso estamos asignándole la ventana que contiene al formulario, el segundo parámetro es un objeto de configuración donde le estamos asignando un mensaje a mostrar; una vez creada la “instancia” mostramos la mascara mediante el método “show”.

Ahora debemos ocultarla cuando el servidor nos responda, esto significa que debemos invocar el método “hide” en la función “success” y “failure”.

success: function(form,action){
		mask.hide(); //hide the mask
		Ext.Msg.alert('Success',action.result.msg);
}

Conclusiones

En el tema de hoy aprendimos algunas cosas importantes, hacer un submit es algo sumamente sencillo, además de ser completamente configurable ya que se puede adaptar a nuestras necesidades.

Si existen dudas sobre este tutorial puedes dejarla en los comentarios o inscribirte en los foros y unirte a la comunidad que día a día está creciendo, también recuerda inscribirte al curso vía RSS o correo electrónico, y por supuesto seguirnos en Twitter (@quizzpot) para estar al tanto de las actualizaciones.