Editar las celdas de un grid Más videos
Comentarios: 26
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
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.
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.
Demostración
Si quieres ver el ejemplo que haremos al final de este tutorial te invito a probar la demostración que he preparado.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.
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 con información cargada con Ajax
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.
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.
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.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”.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.
Instructor del curso
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.
26Comentarios
barbaro, excelente q mas se puede decir
No
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.
Otra cosa, probe colocando en el attributo width en porcentaje, funciono pero solo para IE y no para firefox. Gracias nuevamente.
Si quieres que las columnas se ajusten cuando redimensionas el grid debes utilizar la propiedad "forceFit: true" en la configuración del Grid. saludos
Muy agradecido por estos tutorials , los felicito por no tener egoismo en enseñar, barbaros !!
Siempre he creido que enseñando a otros es cuando aprendes más!! no entiendo porque la gente es egoista O.o
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?
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.
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', // <--- total de registros a paginar fields: ['fecha','titulo','comentario'] }); store.load(); var textField = new Ext.form.TextField(); var grid = new Ext.grid.EditorGridPanel({ store: store, columns: [ new Ext.grid.RowNumberer(), {header:'Fecha', dataIndex:'fecha',sortable: true}, {header:'Título', dataIndex:'titulo',sortable: true, editor:textField}, {header:'Comentario', dataIndex:'comentario',sortable: true, editor:textField} ], border: false, stripeRows: true }); var win = new Ext.Window({ title: 'Back-End', layout: 'fit', width: 510, height: 350, items: grid }); win.show();
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!.
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!
Crysfel, nuevamente, gracias por el tutorial, muy util.
Por nada! seguiremos publicando más contenido para beneficio de todos!!
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.
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
Desde luego, dale una mirada al component 'actioncolumn'
como envio toda la gria en un post y que reciba en mi php el post de solo los campos modificados...
Como adicionar a una columna el ver detalles y modificar de está en otra página??. Saludos
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
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!!
Intenta usar un renderer en la columna ;)
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!!
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..
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
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