Aprendiendo Ext JS 3

Editar las celdas de un grid Más videos

Descripción del tema

El día de hoy aprenderemos como editar las celdas de un Grid de una manera muy sencilla, realmente te sorprenderás cuán fácil y rápido es. 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.
Grid editable

Demostración del ejemplo

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.
Grid editable

Ventana con Grid vacio

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.
Grid editable

Grid con información cargada con Ajax

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.
Grid editable

Editar una celda al dar doble clic

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.
Grid editable

Filtrar solo 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.
Grid editable

Campos "Dirty"

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”.
Grid editable

Usando el teclado para movernos en el Grid

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.

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?

26Comentarios

  • Avatar-1 gustavo 28/08/2009

    barbaro, excelente q mas se puede decir

    • Avatar-11 Fernando 05/09/2009

      No

      • Avatar-7 jairo 24/09/2009

        Hola, buen dia, estos tutoriales de verdad que se las traen, muy agradecido estoy. Gracias. Solo quisiera hacer una pregunta y no se si corresponde con el tema, pero me gustaria saber como hago para que las columnas del grid me ocupen el 100% de la ventana. Por ejemplo: 30% y 70%, para cuando redimensiones el grid tambien se ajusten. Gracias.

        • Avatar-8 jairo 24/09/2009

          Otra cosa, probe colocando en el attributo width en porcentaje, funciono pero solo para IE y no para firefox. Gracias nuevamente.

          • Avatar-10 Crysfel 24/09/2009

            Si quieres que las columnas se ajusten cuando redimensionas el grid debes utilizar la propiedad "forceFit: true" en la configuración del Grid. saludos

            • Avatar-7 Giordano 25/01/2010

              Muy agradecido por estos tutorials , los felicito por no tener egoismo en enseñar, barbaros !!

              • Avatar-8 Crysfel Villa 23/07/2013

                Siempre he creido que enseñando a otros es cuando aprendes más!! no entiendo porque la gente es egoista O.o

              • Avatar-6 Antonio 26/01/2010

                Hay alguna manera para que el grid se coloque en modo de edición con solo pararme en una celda, me explico, que no haya necesidad de oprimir Enter o hecer doble clic?

                • Avatar-3 Bladimir Balbin 12/02/2010

                  crysfel, como me puedo referir a una celda en especial? y la otra pregunta puedo hacer una validacion entre dos columnas si una tiene valor que la otra no lo tenga las dos no pueden ser cero.

                  • Avatar-11 Andrés J. Sande 14/05/2010

                    Hola Crysfel. Acabo de crear un grid editable. Y todo funciona, aparece el grid y los datos. El problema es que "no es editable". Lo he revisado todo 100 veces y no consigo encontrar el problema. Te pego el código a ver si me puedes ayudar. Gracias por adelantado. var store = new Ext.data.JsonStore({ url: 'paging2.php', root: 'data', totalProperty: 'total', // &lt;--- total de registros a paginar fields: [&#039;fecha&#039;,&#039;titulo&#039;,&#039;comentario&#039;] }); store.load(); var textField = new Ext.form.TextField(); var grid = new Ext.grid.EditorGridPanel({ store: store, columns: [ new Ext.grid.RowNumberer(), {header:&#039;Fecha&#039;, dataIndex:&#039;fecha&#039;,sortable: true}, {header:&#039;Título&#039;, dataIndex:&#039;titulo&#039;,sortable: true, editor:textField}, {header:&#039;Comentario&#039;, dataIndex:&#039;comentario&#039;,sortable: true, editor:textField} ], border: false, stripeRows: true }); var win = new Ext.Window({ title: &#039;Back-End&#039;, layout: &#039;fit&#039;, width: 510, height: 350, items: grid }); win.show();

                    • Avatar-3 SrCobranza 01/07/2010

                      jajajaja no me dejaba hacer doble click en la celda porque estaba usando "var grid = new Ext.grid.GridPanel ()", en vez de "var grid = new Ext.grid.EditorGridpanel()". es un codigo sensillo pero errores como este te hacen perder horas de trabajo, aporto esto para alque que tenga problemas con la edicion de celdas. No te ahoges en un vaso de agua!.

                      • Avatar-8 SrCobranza 01/07/2010

                        hola antonio en la configuracion del grid cambia "clicksToEdit : 2" que lo que viene por defecto y pone "clicksToEdit : 1" agradescan a Crysfel es un capo en esto! segui asi capo!

                        • Avatar-9 Desarrollo Web 24/08/2010

                          Crysfel, nuevamente, gracias por el tutorial, muy util.

                        • Avatar-6 yyeshua 03/09/2010

                          Hola hola... Yo tengo un par de preguntas. 1) He utilizado en mi grid el CellSelectionMode, pero en este componente no he encontrado forma alguna de obtener el record de la fila, pues necesito manipularla. Lo que quiero hacer es que si la columna "A" tiene un valor mayor a cero, entonces la columna "B" no pueda escribirse y le asigne automáticamente un valor igual a cero, y viceversa, además de que si se coloca el valor cero en cualquiera de las dos celdas la otra se habilite automáticamente. Este comportamiento lo he logrado utilizando el RowSelectionModel, pero en este caso la verdad que me resulta mucho más cómodo el CellSelectionModel y no encuentro como hacer. 2) Y bueno, como ya estoy utilizando el RowSelectionModel, la otra cosa que necesito es que desde el teclado pueda editar las celdas. Con todo lo que he hecho, deshecho y vuelto a hacer, sólo logro que la edición de celda se logre dando un click en la celda, posteriormente puedo moverme con el tab, pero quiero que al dar Enter o Insert en cualquier fila pase a la edición de la primer columna. ¿concejos?. Gracias.

                          • Avatar-10 Ronny 15/10/2010

                            Este ejemplo es muy bueno, lo que estoy buscando es algo similar a este ejemplo pero con un botoncito en la parte derecha de todos los items que diga eliminar y una vez presionado, elimine la fila. Asi como un comprobante contable o inventario, se puede hacer esto? Saludos... Ronny

                          • Avatar-10 gado 15/03/2011

                            como envio toda la gria en un post y que reciba en mi php el post de solo los campos modificados...

                            • Avatar-6 Rocnick 26/06/2011

                              Como adicionar a una columna el ver detalles y modificar de está en otra página??. Saludos

                              • Avatar-8 Eduanys 30/09/2011

                                Que tal Estoy utilizando la biblioteca ExtJS y necesito editar un componente Ext.grid.PropertyGrid y que al terminar la edicion, en la celda se muestre un icono

                                • Avatar-7 jose luis 21/02/2012

                                  Quisiera saber como marcar el borde de una celda con un color Tengo esto pero no funciona: grid.getView().getCell(2, 1).style.borderColor = "red" no se que configuracion me este faltando, espero que me puedan ayudar, saludos y gracias!!

                                  • Avatar-5 Crysfel 21/02/2012

                                    Intenta usar un renderer en la columna ;)

                                    • Avatar-2 jose luis 21/02/2012

                                      Con el render pasaba lo mismo, me seguia faltando una configuracion, pongo la solución por si a alguien le sirve: grid.getView().getCell(1, 1).style.borderColor = "red"; grid.getView().getCell(1, 1).style.borderStyle = "solid"; Con eso se le pone el borde de color rojo a una celda. Otra duda que tengo es, ¿como quitar el triangulito que pone al editar (dirty)? lo pone por default pero no quiero que lo ponga.. saludos!!

                                      • Avatar-3 Jose Luis 21/02/2012

                                        Ya lo resolvi, para que no se muestre el triangulito de dirty en javascript: grid.GetView().MarkDirty = false; ó view: Ext.grid.GridView ({ .... markDirty: false .... }) Saludos Crysfel y a toda la comunidad..

                                        • Avatar-12 Alder 28/02/2012

                                          Tengo una duda, si quiero cambiar el valor de una celda por un icono, lo que hago es en el render aplicar esto: renderDeCelda: function (value, metadata, record, rowIndex, colIndex, store) { metadata = 'icon-cls:icon-accept;'; return ' '; }, Pero no funciona, no se si me puedan ayudar

                                          • Avatar-6 rodrigo 20/11/2012

                                            disculpen por comentar asi pero he probado la solucion que te dio pero en crome no me funciona no puedo redimensionar las tablas aunque en firefox si gracias

                                            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.