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:

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. 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:

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.

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.

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. 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]
});	

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. 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!