Foro

Guardar los cambios en row de un grid editable en una BD

Hola, primero que nada queria felicitarlos por la pagina y los foros. son de mucha ayuda    Gracias. Estuve siguiendo el tutorial para crear un grid editable (el del curso de quizzpot tiene peliculas). Pude crear el mio y pude llenarlo con datos extraido de una BD mediente mysql y php.  También pude hacer que el form que se abre al hacer doble click se llene con los datos del row correspondiente. [[b]Lo que quiero hacer y no se como es: que al hacer click en un boton del form abierto, se llame al codigo php mediante ajax que para poder grabar los datos modificados en la base de datos.[/b] Con el codigo php y msql no tengo problema, pero [b]no se como hacer con JS y Ajax para que los botones del form envien los datos de los campos de texto al archivo php (¿por POST se hace?) y ejecuten el codigo php corrspondiente para actualizar la BD.[/b] Les dejo la url para que puedan ver la prueba que estoy haciendo: [url]http://www.prismacomunicacion.com.ar/extjs/gridxml_quizzpot/gridxml-editable/gridform.html[/url] (al hacer doble click en los articulos se abre el form que les digo) dejo también la parte del código que si no me equivoco es la encargada de abrir el form de edición.

//TODO: create a listener for the "rowdblclick" event here
		grid.on('rowdblclick',this.editMovie);
	},
	
	editMovie: function(grid,index,event){
		var record = grid.getStore().getAt(index);
		
		var form = new Ext.form.FormPanel({
			width:700,
			bodyStyle:'margin-left:10px;',
			border:false,
			labelWidth: 80,
			defaults: {
				xtype:'textfield',
				width:550
			},
			items:[
				{fieldLabel:'Nombre',id:'nombre'},
				{fieldLabel:'Codigo',id:'codigo'},
				//Combo {xtype:'combo',fieldLabel:'Codigo',id:'codigo',triggerAction:'all',store:[2009,2008,2007,2006]},
				{fieldLabel:'Descripccion',id:'descripccion'},
				{xtype:'numberfield',fieldLabel:'Precio',id:'precio'},
				{fieldLabel:'Imagen',id:'imagen'}
			]
		});
		var preview = new Ext.Panel({
			width:91,
			height:140,
			html: '<img id="preview" />'
		});	
		var win = new Ext.Window({
			layout: 'column',
			title: 'Editar Producto',
			width:850,
			height:250,
			modal: true,
			bodyStyle: 'padding:10px;background-color:#fff',
			buttons: [{text:'Guardar Cambios'},{text:'Cancelar'},{text:'Eliminar Registro'}],
			items: [preview,form]
		});		
		win.show();
		form.getForm().loadRecord(record);
		Ext.get('preview').dom.src = record.get('img');
	},
	
	image: function(value,metadata,record){
		return '<img src="'+value+'" alt="'+record.get('title')+'" />';
	},
	
	title: function(value, metadata, record){
		metadata.attr = 'style="white-space:normal"';
		return '<p><strong>'+value+'</strong>'
		// si le quitamos comentario se agrega este texto debajo del nombre del producto</p>';
		
		
	},
	
	money: function(value){
		return '$ '+value;
	}
}
Ext.onReady(com.quizzpot.tutorial.GridFormTutorial.init,com.quizzpot.tutorial.GridFormTutorial);

Muchas Gracias por la ayuda!!! saludos.

Usuario no registrado
05/08/2009

4 Respuestas

Mejores votos Por fecha Solución

dentro del botón guardar tienes que crear un "handler" con la función que se ejecutará cuando el botón sea "clickeado", luego solamente haces algo como lo siguiente:

form.getForm().submit({
			url: 'submitform.php', //url donde se hará la petición
			success: function(response){ //si todo resulta bien
				console.debug(response);
			},
			failure: function(response){ //si hay algún error
				console.debug('fail!');
			}
		});

Por defecto la petición se hace mediante "POST" pero tu puedes cambiarlo mediante la propiedad "method", ejemplo:

form.getForm().submit({
			url: 'submitform.php',
			method: 'PUT', // <-- aqui se configura
			success: function(response){ 
				console.debug(response);
			},
			failure: function(response){ 
				console.debug('fail!');
			}
		});

Saludos  PD: Justo hoy voy a publicar un tutorial al respecto

Crysfel Villa
05/08/2009

Hola, muchas gracias por tu respuesta stock!   tengo algunas dudas, ya que soy nuevo en JS y muuuy nuevo en Extjs. (disculpas si son preguntas muy bobas)  . [b]no se como crearle un handler distinto a cada botón del formulario de edición: yo hice esto pero no funciona y no se como escribirlo: [/b]

var win = new Ext.Window({
			layout: 'column',
			title: 'Editar Producto',
			width:850,
			height:250,
			modal: true,
			bodyStyle: 'padding:10px;background-color:#fff',
			buttons: [{text:'Guardar Cambios', handler:
                                 form.getForm().submit({
                                 url: 'submitform.php', 
                                 success: function(response){ //si todo resulta bien
                                 console.debug(response);
                                 },
                                 failure: function(response){ //si hay algún error
                               console.debug('fail!');
                                  }
                                  });
},{text:'Cancelar'},{text:'Eliminar Registro'}],
			items: [preview,form]
		});		
		win.show();

y otra duda: en submitform.php deberia importar las variables como siempre, mediante $_POST[nombre-del-campo] no? gracias por la ayuda

Invitado
09/08/2009

Hola matias, para eso deberías hacer algo así:

 buttons: [
		{
			text: 'Consultar',
			handler: function()//<--handler del boton consultar
			{
                           
                           
			}
		},
 		{
			text: 'Limpiar',
			handler: function() //<--handler del boton limpiar
			{
				estEst_Form.getForm().reset();
			}
}
]

Espero te sirva Salu2 Crespo

Invitado
09/08/2009

[quote="matias"] y otra duda: en submitform.php deberia importar las variables como siempre, mediante $_POST[nombre-del-campo] no? [/quote] Así es  saludos

Crysfel Villa
09/08/2009

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.