Aprendiendo Ext JS 3

Editar la fila de un Grid en un formulario Más videos

Descripción del tema

En este tutorial voy a explicar como podemos editar una fila de un Grid utilizando un formulario en una ventana por separado, vamos a llenar los campos del formulario con la información que tenemos capturada en el Grid.

Demostración

Vamos a desplegar en un Grid las películas que han sido más vistas, al dar doble clic sobre una de las filas vamos abrir una ventana que contenga un formulario con campos que serán llenados con la información que tengamos en el Grid, puedes probar la demostración la cual es semejante a la siguiente imagen:
Grid editable

Ejemplo Final

Material de apoyo

Para continuar es necesario descargar el material de apoyo donde ya esta creada el Grid que muestra la información. Recuerda que tienes que copiar los archivos descargados al servidor Web que instalamos al inicio de este curso. Si en este momento ejecutas en tu explorador el material de apoyo, podrás ver la información en el Grid.
Grid editable

Material de apoyo

También se pueden paginar las filas de cinco en cinco. Si tienes alguna duda en cuanto al código necesario para realizar lo anterior mencionado, te recomiendo leer los temas anteriores donde se explica a detalle como realizarlo.

Doble clic en una fila

Necesitamos lograr que cuando el usuario de doble clic sobre una fila se abra una ventana con un formulario para poder editar la información, para esto necesitamos crear un “listener” del evento “rowdblclick” del grid. Al final del método “init” vamos a crear este “listener” de la siguiente manera:
grid.on('rowdblclick',this.editMovie);
Con la instrucción anterior logramos hacer que al dar doble clic sobre una fila (row) se ejecuta la función “editMovie”, así que es necesario crear esta función:
Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.GridFormTutorial = {
	init: function(){		
		//… código removido
		
		//TODO: create a listener for the "rowdblclick" event here
		grid.on('rowdblclick',this.editMovie); //<-- creamos el listener
	},
	
	//éste método se ejecuta cuando se da doble clic sobre una fila
	editMovie: function(grid,index,event){
		//aqui vamos a escribir el código donde creamos
		//la ventana y llenamos el formulario.
	},
	
	image: function(value,metadata,record){
		//… código removido
	},
	
	title: function(value, metadata, record){
		//… código removido
	},
	
	money: function(value){
		//código removido
	}
}

Ext.onReady(com.quizzpot.tutorial.GridFormTutorial.init,com.quizzpot.tutorial.GridFormTutorial);
Es importante mencionar los parámetros que está recibiendo la función “editMovie”, el primero es el grid sobre el cual se dio doble clic, el segundo es el índice en el store donde se encuentra la información que despliega la fila y el tercer parámetro es el evento ocurrido.

Obtener el record del store

Con los parámetros recibidos es suficiente para obtener el “record” con la información a editar, utilizando el “grid” obtenemos el “store” y utilizando el “index” podemos sacar el “record” que necesitamos del “store”.
//este código va en la función “editMovie”
var record = grid.getStore().getAt(index);

Ext.Msg.alert('Test','Title: '+record.get('title')); //alert temporal
Al actualizar el navegador y dar doble clic sobre alguna fila del grid podremos ver algo semejante a la siguiente imagen:
Grid editable

Obtener el record del store

Crear el formulario de edición

Ahora vamos a crear el formulario que utilizaremos para editar la información que tenemos en el “record” y que fue sacada del grid.
var form = new Ext.form.FormPanel({
	width:270,
	bodyStyle:'margin-left:10px;',
	border:false,
	labelWidth: 80, //Con esto hacemos mas pequeñas las etiquetas
	defaults: {
		xtype:'textfield',
		width:150
	},
	items:[
		{fieldLabel:'Title',id:'title'},
		{xtype:'combo', fieldLabel:'Year', id:'year' ,triggerAction:'all', store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Weekend',id:'weekend'},
		{xtype:'numberfield',fieldLabel:'All Time',id:'allTime'},
		{fieldLabel:'Image',id:'img'}
	]
});
Ya hemos estudiado como crear formularios, si tienes alguna duda al respecto puedes ir a repasar el tema correspondiente. Este formulario no tiene nada especial, solamente se están creando cinco campos, dos de ellos son cajas de texto que aceptan cualquier caracter, los otros dos son cajas de texto que aceptan solamente números y el último campo es un combo para poder seleccionar el año. Del código anterior es importante resaltar que el “id” de los campos se llamen igual que los campos que contiene el “record” que se definió en el store, esto es importante para que podamos llenarlos de una manera muy sencilla, más adelante veremos como hacerlo, por ahora solamente asegúrate que tengan el mismo nombre.

Crear la ventana contenedora del formulario

Ya creamos el formulario, pero aún no se muestra en pantalla, es por eso que vamos a crear una ventana que contenga el formulario anterior.
var win = new Ext.Window({
	title: 'Edit Movie',
	width:400,
	height:250,
	modal: true,
	bodyStyle: 'padding:10px;background-color:#fff',
	buttons: [{text:'Save'},{text:'Cancel'}],
	items: [form]
});		
win.show();
El código anterior debe ser familiar para ti, ya que en repetidas ocasiones lo hemos hecho, pero si existe alguna duda es mejor aclararla en el tutorial donde hablamos acerca de las ventanas. Si actualizamos el explorador y damos doble clic sobre alguna fila veremos algo como la siguiente imagen.
Grid editable

Formulario en una ventana

Llenar los campos del formulario

Hasta ahora aparece el formulario vacío, en este paso vamos a llenarlo de una manera muy sencilla.
form.getForm().loadRecord(record);
Con la línea anterior es suficiente para que la información de la fila en la que hicimos doble clic se cargue en los campos del formulario, esto es posible ya que nombramos el “id” de cada campo igual a los campos del registro.
Grid editable

Información cargada en el formulario

Vista previa de la imagen

Para darle un toque especial a nuestro formulario vamos a desplegar en la parte izquierda la imagen de cada película a editar, para esto vamos a crear un panel que contenga una imagen la cual podremos modificarle su “src” mediante su “id”.
var preview = new Ext.Panel({
	width:91, 
	height:140,
	html: '<img id="preview" />' //imagen vacía
});	

var win = new Ext.Window({
	title: 'Edit Movie',
	width:400,
	height:250,
	modal: true,
	bodyStyle: 'padding:10px;background-color:#fff',
	buttons: [{text:'Save'},{text:'Cancel'}],
	items: [preview,form]
});		
win.show();
Si actualizas el explorador verás que el formulario no se ve bien, esto es por que los paneles se van posicionando como en una pila.
Grid editable

Se desacomoda el formulario

Para solucionar esto es necesario cambiar el “layout” de la ventana, en este caso vamos a utilizar el “column” para crear columnas, no quiero profundizar en el tema de los “layout” porque en el futuro hablaré en detalle sobre esto, por ahora simplemente ten en mente que al cambiar el layout a columnas solucionaremos el problema.
var win = new Ext.Window({
	layout: 'column', //cambiamos la manera en que se posicionan los paneles
	title: 'Edit Movie',
	width:400,
	height:250,
	modal: true,
	bodyStyle: 'padding:10px;background-color:#fff',
	buttons: [{text:'Save'},{text:'Cancel'}],
	items: [preview,form]
});	
Grid editable

Utilizando columnas para mostrar correctamente el formulario

Lo siguiente es modificar el “src” dinámicamente para que aparezca la imagen dentro del contenedor.
Ext.get('preview').dom.src = record.get('img');
Recuerda colocar la línea anterior después de mostrar la ventana que “renderiza” el formulario y la ventana.
Grid editable

Mostrar la imagen inicial

Por último necesitamos refrescar la imagen al actualizar el campo “img” del formulario, para esto necesitamos poner un “listener” al evento “blur” del campo “img”.
Ext.getCmp('img').on('blur',function(field){
	Ext.get('preview').dom.src = field.getValue();
});

Guardar la información del formulario

Para guardar la información de un formulario simplemente ejecutamos el método “submit”, con esto hacemos que el formulario envíe la información contenida en sus campos al servidor mediante Ajax, en esta ocasión no voy a mostrar como hacerlo pues quiero dedicar un tema exclusivamente a esto.

Conclusiones

El día de hoy vimos como llenar un formulario con información de un “record”, también aprendimos como crear columnas en una ventana, si tienes alguna duda puedes preguntar en el foro donde la comunidad puede ayudarte, además recuerda inscribirte a las Feeds mediante tu lector preferido de RSS o mediante correo electrónico.

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.

¿Olvidaste tu contraseña?

15Comentarios

  • Avatar-8 Julio Cesar 29/07/2009

    Gracias!, muy buen ejemplo. Creeme que me esta sirviendo mucho, por lo pronto sigo estudiando, soy nuevo en esto, y pronto me animare a realizar algo para poner en practica lo aprendido.

    • Avatar-3 Michael 30/07/2009

      Stock, me pareció genial esto, vamos ah probarlo con el servidor, :D , ale muchas gracias.

      • Avatar-6 Pepe 31/07/2009

        Te doy las gracias, y sigue así.

        • Avatar-5 Spit 04/08/2009

          Genial... estoy aprendiendo un monton con tu tutorial porque estan bien explicados y encima pones el codigo y una demostracion para probarlo por si algo te falla.Sigo pendiente por si sacas mas temas.byebye

          • Avatar-5 xander 17/08/2009

            ACTUALIZAR GRID-EXTJS una consulta... como puedo actualizar la data del grid q trae data de un archivo .php sin tener q actualizar toda la pagina

            • Avatar-9 Alejandro 10/06/2010

              Quisiera saber si es posible cambiarle el color a la columna de un grid cuando dor clic sobre el header. Si alguin lo sabe por favor me escriba o lo publique

              • Avatar-11 Julian Lasso 01/12/2010

                Hola, me gustaría saber como refrescar el Grid sin necesidad de volver a cargar la página una ves ya se graben los datos del formulario ¿me podrías ayudar con ese punto por favor? Salu2

                • Avatar-10 bjmf 18/02/2016

                  handler:function(){ myStore.reload(), }

                  • Avatar-10 Julian Lasso 19/02/2016

                    Hola, aunque la respuesta me llegó algo tarde, no debo de ser desagradecido y mucha gracias bjmf por tu respuesta. Aunque la verdad ya perdí el entusiasmo por ExtJS ahora ando con AngularJS, NodeJS, MongoDB :)

                • Avatar-8 DrMartin 07/03/2011

                  ¿Que debo hacer para que pueda subir el archivo de la imagen en vez de solo cambiar el src?

                  • Avatar-3 Simon Guerrero 17/02/2012

                    Hola, estoy creando un extjs grid y todo bien solo que quiero ahora crearlo bajo un parametro que ingresa el usuario me podrian ayudar ..!!

                    • Avatar-3 kjoe 29/11/2012

                      una pregunta quiero cargar en el formulario solo un campo del grid pero automaticamente se cargan todos aun cuando no tiene un id del store asignado. alguna ayuda?

                      • Avatar-5 Carlos Enríquez 24/04/2013

                        Para quienes necesiten refrescar el grid, solamente hay que hacer lo siguiente: grid.store.load(); Y se refrescan los datos del grid sin recargar la página.

                        • Avatar-9 Eros balincos 22/06/2015

                          Quisiera saber si es posible cambiarle el color a la columna de un grid cuando dor clic sobre el header. Si alguin lo sabe por favor me escriba o lo publique http://www.pulsionerotica.com/

                          • Avatar-6 david 25/07/2019

                            Hola, alguien tendra el material que se usa en esta clase? Gracias anticipadas.

                            Instructor del curso

                            Crysfel3

                            Autor: Crysfel Villa

                            Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                            Descarga Código Fuente Ver Demostración

                            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.