Guardar información en el servidor Más videos
Comentarios: 21
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
Hoy vamos a ver como enviar la información capturada en un formulario de Ext JS al servidor para ser guardada en una base de datos o ser procesada de la manera en que deseemos.
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.
Si en este momento damos clic sobre el botón “save” veremos como se recarga completamente la página.
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”.
Ahora debemos ocultarla cuando el servidor nos responda, esto significa que debemos invocar el método “hide” en la función “success” y “failure”.
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.Ejercicio final
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.
Submit tradicional, no utiliza Ajax
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”.
Submit del form utilizando Ajax
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:
Grabado con éxito
Algo salió mal al grabar la información
{
"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”.
Máscara que muestra un mensaje al usuario
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
21Comentarios
Gracias.... este libreria es espectacular estoy iniciando con ajax y aqui estoy aprendiendo.. gracias muchas gracias
Hola Crysfel, El enlace del tema anterior "Llenar formularios con información del servidor" no funciona.
Hola, He creado la versión jsp del fichero php. Y con la versión 3.0.0 de ExtJS, decir que el apartado: "Hacer el submit con el botón save ", solo me ha funcionado, si comento la línea: url: 'submitform.jsp' y añado las siguientes sentencias en el método sendData: //submit the form this.form.getForm().getEl().dom.action = 'submitform.jsp'; this.form.getForm().getEl().dom.method = 'POST'; this.form.getForm().submit(); Se supone que esto en teoría es lo mismo, pero parece ser que no. Saludos.
La propiedad success no se comporta de igual forma fuera de un formulario. Ejecuto una Ajax.request y en el servidor y mando en la respuesta "success:false" y en la vista entra en metodo de success y no de failure. Hay alguna diferencia entre usarla como en este ejemplo y usarla sin formulario?
La propiedad "success" solo es para los formularios, con esto se ejecutan las validaciones de los campos, cuando utilizas el componente Ajax el método failure se ejecuta cuando el servidor regresa algún error en las cabeceras, ej: 404, 403, 401, 500, etc.
Aclarada la duda, gracias.
Muchas gracias, esta informacion me fue de mucha ayuda, estoy haciendo un formulario de rejistro de usuarios con esto ya nada mas me quedaria faltando adicionar el CATCHA y listo
en el método submit también se puede colocar las siguiente propiedad para no hacer la mascara y se agrega un Ext.Msg.wait de forma atomatica this.form.getForm().submit({ waitMsg: 'Por favor espere', waitTitle: 'Enviando información', success: .... failure: .... });
Hola,estoy intentando mezclar este ejemplo con el anterior, pero tengo problemas me podrias a grandes rasgos como cuales serian las modificaciones, ya que en la propiedad url: pongo el submit o el load.... gracias.
pedrocadiz no se si te entendi bien. En la propiedad url pones la ruta de la pagina del servidor que recibe los datos del formulario, solo eso. Mediante el metodo submit es que realmente envias los datos a la pagina del servidor (que seria el valor de url).
Hola, estoy intentando hacer un submit pero no me esta funcionando, utilizo el exttld con el struts2 ... podias ayudarme con este codigo y decirme en que me estoy equivocando??
No entiendo la duda
Hola, gracias por el interes (envíe código para saber si estaba correcto pero no me envío el código había sido). Ahora ya he conseguido hacer el submit ..
Hola, estoy intentando trabajar con exttld, pero me esta resultando complicado, nose si estoy implementando de la manera correcta, tengo un treePanel en un jsp y en el onClick del treeNode quiero ejecutar una acción que me muestre otra pagina jsp en el cuerpo de mi aplicación, es decir configuro un panel con un id y hago un renderto para mostrar, solo que me esta dando error al hacer el Ext.getCmp(id del panel).load --> no funciona, no hace el load..
Hola, soy relativamente nuevo con ExtJS, encontré este magnífico blog con muy interesantes ejemplos, muchas gracias por tu contribución invalorable... Quisiera pedirte una mano con el siguiente problema que tengo en el código, estoy tratando de construir una ventana de autentificación que simplemente al hacer clic en “iniciar” cargué el siguiente html "desktop.html" y no he podido hacerlo hasta ahora, estoy compartiendo el código para que puedas iluminarme y comentarme donde estoy cometiendo el error... muchas gracias por tu ayuda. <!-- // ---- Codigo de login.js ------- Ext.BLANK_IMAGE_URL = '../ext/3.2.1/resources/images/default/s.gif'; Ext.onReady(function(){ Ext.QuickTips.init(); // Creamos el formulario var login; if(!login){ login = new Ext.form.FormPanel({ border: false, frame: false, standardSubmit: false, bodyStyle: 'background-color:#dfe8f6;', url: 'desktop.html', labelWidth: 80, defaults: { anchor: '100%', allowBlank: false }, items : [ { fieldLabel: 'Usuario', name: 'nom_user', value: 'demo', xtype: 'textfield' }, { fieldLabel: 'Contraseña', inputType: 'password', name: 'nom_pass', value: 'demo', xtype: 'textfield' }], buttons: [{ text: 'Iniciar', formBind: true, handler: function(){ // submit the form login.getForm().submit({ method: 'POST', waitTitle: 'Autenticando..', waitMsg: 'Enviando datos...', success: function() { var redirect = "desktop.html"; window.location = redirect; }, }); } }] }); } // Creamos la ventana Login var win; if(!win){ win = new Ext.Window({ applyTo: 'login-win', closable: false, plain: false, resizable: false, layout: 'fit', bodyStyle: 'padding:10px;background-color:#dfe8f6;', width: 300, height: 162, items: [login] }); } win.show(this); }); -->
Hola Summer. Te sugiero poner tu pregunta en el foro (http://foro.quizzpot.com) donde tu duda sera respondida mas facilmente. Saludos
Crysfel: disculpa creo que en los archivos del tutorial hay un error en el php actualmente esta if(rand(0,1)===0) creo que es if(rand(0,1)==0) esto hacia que el "success":false, siempre pero se guardaba el dato, bueno a mi al corregirlo me ayudo que al primer intento funcionara no se dejo la inquietud
Hola que tal, sabes tu manera de enseñar es super buena yo me e metido en esto de Extjs con poco conocimiento y gracias a ti es que e podido avanzar y comprender pero te puedo pedir un favor podrias poner una lista donde estè cada uno de los tuto referente a este tema, o pasarme los link de todos los tutos o donde los puedo ubicar? Millllllllllllll gracias..................... Y sigue adelante...
Parámetros extra: Yo quisiera saber cómo mandar parametros que no sean un valor por defecto, sino un valor que está en una variable. Es decir, algo como esto: params: { extraParam: 'Extra params!', param2: 'Param 2', prueba: $valor } No me deja hacer esto y no sé como hacerlo. Por favor, agradecería la ayuda. Gracias.
Crysfel otra vez una pregunta en cuanto al scope, cuando en el handler del boton save en su propiedad scope le pones el parametro this en esta linea de codigo {text:'Save',handler:this.sendData,scope:this} se have referencia al ambito del objeto com.quizzpot.tutorial.SubmitFormTutorial o al ambito de la funcion manejadora que en este caso sería sendData, esta propiedad scope aun me resulta confusa! gracias por tu ayuda y muy buen tutorial
Hola Maria. Sucede que cuando asignas una función a un objeto, esta función cambia su scope al del nuevo objeto que ha sido asignado, entonces cuando se hace el scope:this, nos aseguramos que la función se ejecute sobre el objeto SubmitFormTUtorial. Saludos