Blog

Ya sabemos como crear un Grid utilizando una llamada Ajax para llenar el contenido, lo que vamos hacer hoy es agregar la funcionalidad de poder editar el contenido de una celda, para ello cuando el usuario de doble clic sobre una celda aparecerá una caja de texto donde podrá capturar el nuevo contenido.

Demostración

Si quieres ver el ejemplo que haremos al final de este tutorial te invito a probar la demostración que he preparado.

Material de apoyo

Para continuar es necesario descargar el material de apoyo que usaremos para este ejemplo, luego de hacerlo asegúrate de copiarlo al servidor web donde hemos estado trabajando, ahí crea una carpeta que se llame “editorgrid” y pega los tres archivos dentro de esta. Asegúrate de que las rutas a la librería de Ext JS sean las correctas en el “html” que has descargado.

El servidor

Antes de seguir adelante quiero mostrar el contenido del archivo “editorgrid.php” (viene en el material de apoyo).

<?php
	header("Content-Type: text/plain"); 

	$data = array(
		'success'=>true,
		'total'=>11,
		'data'=>array(
			array('city'=>'Mexico city','visits'=>684,'pageVisits'=>4.11,'averageTime'=>'00:06:53','time'=>date('U')),
			array('city'=>'La Victoria','visits'=>443,'pageVisits'=>4.39,'averageTime'=>'00:07:28','time'=>date('U')),
			array('city'=>'Madrid','visits'=>380,'pageVisits'=>3.11,'averageTime'=>'00:05:22','time'=>date('U')),
			array('city'=>'Providencia','visits'=>204,'pageVisits'=>3.83,'averageTime'=>'00:08:20','time'=>date('U')),
			array('city'=>'Bogota','visits'=>204,'pageVisits'=>3.26,'averageTime'=>'00:04:57','time'=>date('U')),
			array('city'=>'Puerto Madero','visits'=>192,'pageVisits'=>3.56,'averageTime'=>'00:05:07','time'=>date('U')),
			array('city'=>'Monterrey','visits'=>174,'pageVisits'=>3.90,'averageTime'=>'00:06:06','time'=>date('U')),
			array('city'=>'Barcelona','visits'=>145,'pageVisits'=>3.28,'averageTime'=>'00:05:39','time'=>date('U')),
			array('city'=>'Caracas','visits'=>132,'pageVisits'=>4.55,'averageTime'=>'00:06:27','time'=>date('U')),
			array('city'=>'Rosario','visits'=>116,'pageVisits'=>2.44,'averageTime'=>'00:04:30','time'=>date('U')),
			array('city'=>'Oaxaca','visits'=>108,'pageVisits'=>1.73,'averageTime'=>'00:02:37','time'=>date('U'))
		)
	);

	echo json_encode($data);
?>

En el código anterior la información está contenida en un arreglo, quiero aclarar que puede estar en una base de datos o en cualquier otro lugar, pero lo hice de esta forma para hacer más sencillo el tutorial.

Lo que debemos tomar en cuenta del código anterior es la manera en que se esta imprimiendo el JSON, pues ese formato debemos definirlo en el store que crearemos a continuación.

Definiendo el “JsonStore”

Vamos a utilizar un JsonStore para almacenar la información que el servidor nos provee y poder manipularla en el grid.

var store = new Ext.data.JsonStore({
	url: 'editorgrid.php',
	root: 'data',
	fields: ['city',{name:'visits',type:'float'},{name:'pageVisits',type:'float'},{name:'averageTime',type:'date',dateFormat: 'H:i:s'},
	{name:'time',type:'date', dateFormat: 'U'}]
});

El código anterior debe ser muy familiar para nosotros a estas alturas del curso, pues lo hemos utilizado muchas veces en los tutoriales anteriores e inclusive dedicamos un tutorial al respecto.

Crear el Grid

Ahora vamos a crear el grid que mostrará la información, para esto vamos a utilizar el componente “Ext.grid.EditorGridPanel” el cual nos permite editar las celdas, la configuración del componente será exactamente igual a la configuración de un Grid normal.

var grid = new Ext.grid.EditorGridPanel({
	store: store,
	columns: [
		new Ext.grid.RowNumberer(),
		{header:'City', dataIndex:'city',sortable: true},
		{header:'Visits', dataIndex:'visits',sortable: true},
		{header:'Page/Visits', dataIndex:'pageVisits',sortable: true},
		{header:'Average Time', dataIndex:'time', width:150,sortable: true,renderer: Ext.util.Format.dateRenderer('H:i:s')}
	],
	border: false,
	stripeRows: true
});

Al ver el código anterior nos damos cuenta que no hay diferencia alguna en las configuraciones con respecto a un “Grid”, hasta aquí no debe haber ninguna duda, si es así te recomiendo leer el tutorial donde hablamos sobre el Grid.

Mostrar la ventana contenedora

Hasta ahora no hemos visto nada en la pantalla del navegador, esto es porque en ningún momento hemos “renderizado” el grid, así que vamos a utilizar una ventana que contenga al grid anterior.

var win = new Ext.Window({
	title: 'Editor Grid example',
	layout: 'fit',
	width: 510,
	height:350,
	items: grid  //Le asignamos el grid
});

win.show(); //mostramos la ventana y su contenido

Si todo ha salido bien deberíamos ver algo semejante a la siguiente imagen.

Cargar la información en el “Grid”

Pero, ¿Dónde esta la información? Si te das cuenta todavía no hemos realizado la llamada Ajax al servidor solicitando la información que tendrá el Grid, así que vamos hacerlo de la siguiente manera.

//Solicitar la información al servidor
store.load();

Ejecutando el método “load” del store recogemos la información, esto ya lo hemos estudiado anteriormente, pero es bueno recordarlo para aquellos que apenas comienzan.

Es interesante notar que al dar clic sobre una celda ésta se selecciona, en un grid normal (con la misma configuración que tenemos en este ejemplo) se debería seleccionar toda la fila por defecto.

Mostrar una caja de texto al dar doble clic

Ahora viene lo interesante de este tutorial, vamos hacer que al dar doble clic sobre una celda aparezca una caja de texto donde podamos escribir y modificar la información.

Primero necesitamos crear la caja de texto de la siguiente manera:

//creamos el texfield antes de crear el grid
var textField = new Ext.form.TextField();

Después debemos asignársela a la columna donde deseamos que aparezca al dar doble clic sobre alguna de sus celdas, para esto utilizamos la propiedad “editor” en la columna.

//asignamos el texfield anterior a la columnas deseada
{header:'City', dataIndex:'city',sortable: true,editor:textField},

Esto es suficiente para lograr nuestro objetivo, actualiza tu explorador y da doble clic sobre alguna celda de la columna “city” y observa lo que sucede.

Filtrar solamente números

Podemos también asignarle a la propiedad “editor” algún otro componente de captura de información, en este caso vamos a crear un “NumberField” para capturar solamente números, adicionalmente vamos a configurarlos para forzar al usuario a introducir algún valor y que no deje vacío el campo.

var numberField = new Ext.form.NumberField({allowBlank:false});

Lo siguiente es asignárselos a las columnas que necesitemos.

//reutilizamos el componentente en varias columnas
{header:'Visits', dataIndex:'visits',sortable: true, editor:numberField},
{header:'Page/Visits', dataIndex:'pageVisits',sortable: true, editor:numberField},

Al hacer esto vemos como ahora valida que el usuario escriba algo en la caja de texto, además de que solamente permite capturar números.

Campos sucios

Cuando modificamos la información original contenida en las celdas aparece un ícono en la parte superior izquierda de la celda, este ícono nos indica que la celda ha sido modificada, Ext JS denomina a estos registros como “Dirty” que traducido al español siginifica “Sucio”, esta funcionalidad es propia del componente y no debemos hacer nada para que aparezca.

Navegación con el teclado

Una de las funcionalidades que vale la pena mencionar es que podemos movernos entre las celdas usando el teclado, simplemente utiliza las flechas del teclado para moverte y si estás editando una celda presiona la tecla “Tab” para pasar a editar la siguiente celta, o bien presiona “Shift + Tab” para pasar a editar la celda anterior, para entrar a editar una celda presiona “Enter” y para salir del modo edición puede presionar “Enter” o “Esc”.

Conclusiones

En este tema vimos como editar las celdas utilizando cajas de texto, realmente es algo sumamente sencillo; en futuros tutoriales mostraré como utilizar combos y algunos otros componentes, además de cómo guardar la información capturada ya que no nos sirve de nada editarla si no la podemos guardar.

Si tienes alguna duda o comentario puedes hacerlo en los foros o en este mismo post, además recuerda seguirnos en Twitter (@quizzpot) para estar al tanto de las actualizaciones.