Una tabla básica con información cargada de un Array Más videos
Comentarios: 15
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
Uno de los controles más interesantes de ExtJS son las grillas, las cuales nos brindan la capacidad de poder mostrar la información de un modo sencillo y ordenado.
En este tutorial vamos a aprender a usar los componentes de una grilla básica como los DataStore o repositorios de datos, los ColumnModel, y los SelectionModel.
Como podemos ver las tablas tienen muy bien definidos sus componentes, para el manejo de datos se usa un store cuyo tipo dependerá del tipo de información que maneje por ejemplo existe el "Ext.data.JSONStore" preparado para poder manejar información en formato JSON, sugiero revisar el API para poder ver más propiedades y tipos de repositorios de datos.
Empaquetando el tutorial
Vamos a empaquetar el código para evitar conflictos con otras variables.Ext.ns('com.quizzpot.tutorial');
Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';
com.quizzpot.tutorial.ArrayGridTutorial = {
init: function(){
//Aquí va el código del tutorial
}
}
Ext.onReady(com.quizzpot.tutorial.ArrayGridTutorial.init,com.quizzpot.tutorial.ArrayGridTutorial);
El Store
Lo siguiente seria definir el repositorio de datos, es decir de donde van a ser obtenidos los datos, para este caso vamos a trabajar con datos estáticos obtenidos desde un Array bidimensional, de este modo://Arreglo bidimensional de datos var myData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'] ];Ahora, vamos a definir un "Ext.data.ArrayStore" que va a encargarse de leer el arreglo de datos, para esto debemos indicarle cual va a ser el nombre de referencia de la columna de datos y el tipo de dato que contiene.
//creando el repositorio de datos
var store = new Ext.data.ArrayStore({
fields: [
{name: 'compania'},
{name: 'precio', type: 'float'},
{name: 'cambio', type: 'float'},
{name: 'pctCambio', type: 'float'},
{name: 'actualizado', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);
El atributo "name", define el nombre con el que vamos a referenciar la primera columna de datos, la columna llamada "price" será la referencia a la segunda columna y así sucesivamente.
Se pueden emplear una gran cantidad de atributos para las referencias a las columnas, como "type" que define el tipo de dato que alberga la columna, "dateFormat" define el formato de las columnas de tipo date(formato ExtJS ver API).
La Tabla
Ahora estamos listos para crear nuestra tabla “instanciando” al objeto "Ext.grid.GridPanel"://Creando el objeto Ext.grid.GridPanel
var grid = new Ext.grid.GridPanel({
title:'Listado de Compañias',
store: store,
renderTo: document.body,
columns: [
{id:'compania',header: "Compañia", width: 160, sortable: true, dataIndex: 'compania'},
{header: "Precio", width: 75, sortable: true, dataIndex: 'precio'},
{header: "Cambio", width: 75, sortable: true, dataIndex: 'cambio'},
{header: "% de cambio", width: 75, sortable: true, dataIndex: 'pctCambio'},
{header: "Actualizado", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'actualizado'}
],
stripeRows: true,
height:250,
width:500
});
Las tablas al igual que los formularios y otros componentes heredan de "Ext.Panel", esto ya ha sido visto en capítulos anteriores así que imagino que estarán familiarizados con esto.
Las Propiedades usadas:
"title": propiedad heredada de la clase Ext.Panel, define el titulo del panel.
"store": propiedad que define de donde la tabla va a obtener los datos, (el Ext.data.ArrayStore definido anteriormente).
"renderTo": define donde la va “renderizarse” (pintarse) la tabla, recibe una referencia al id del un objeto DOM como un DIV.
"columns": define el encabezado de cada columna, aquí se relacionan los datos del store por medio de la propiedad "name" definida en el store.
"id": define el id de la columna.
"header": define el nombre a mostrar en el título de cada columna.
"width": define el ancho de la columna.
"sortable": propiedad “booleanas” que define si se va a permitir el ordenamiento de la data al darle clic al título de la columna.
"dataIndex": aquí se indica el valor de la propiedad "name" del store, con esto asociamos la data de la columna del store con la columna de la tabla.
"renderer": con esta propiedad podemos personalizar como se muestran los datos de la columna, lo explicaré más adelante.
"stripeRows": sirve para mostrar un ligero sombreado interlineado en las filas de la tabla.
"height": define el alto de la tabla.
"width": define el ancho de la tabla.
Imagen de una tabla básica
El ColumnModel
Si bien nuestra grilla ahora está lista para usarse y hay algunas cosas que podríamos necesitar que afortunadamente ExtJS trae consigo; una de esas cosas son los "Ext.grid.ColumnModel", los cuales sirven para poder presentar las columnas de la tabla y relacionar las mismas con las columnas del store, pero a su vez nos proveen funcionalidades de por ejemplo, de selección de filas mediante un checkbox o una columna para la enumeración de las filas. Básicamente la creación de un columnModel es similar al contenido que hemos agregado en la propiedad "columns" de nuestra tabla.//Creando el objeto Ext.grid.ColumnModel
var myColumnModel = new Ext.grid.ColumnModel([
{id:'compania',header: "Compañia", width: 160, sortable: true, dataIndex: 'compania'},
{header: "Precio", width: 75, sortable: true, dataIndex: 'precio'},
{header: "Cambio", width: 75, sortable: true, dataIndex: 'cambio'},
{header: "% de cambio", width: 75, sortable: true, dataIndex: 'pctCambio'},
{header: "Actualizado", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'actualizado'}
]);
//nuestra grilla cambiaria para referenciar a al variable myColumnModel
var grid = new Ext.grid.GridPanel({
title:'Listado de Compañias',
store: store,
renderTo: document.body,
cm: myColumnModel,//referencia al columnModel
stripeRows: true,
height:250,
width:500
});
Ahora vamos a agregar una numeración para nuestras filas así como una columna de checkboxes para selección.
//Creando el objeto Ext.grid.ColumnModel
var myColumnModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
new Ext.grid.CheckboxSelectionModel(),
{id:'compania',header: "Compañia", width: 160, sortable: true, dataIndex: 'compania'},
...
]);
Una tabla con numeración en filas y con checkbox para ser seleccionadas
El SelectionModel
Finalmente solo nos queda agregar un "Ext.grid.SelectionModel" el cual el va a indicar el modo de selección que va a tener nuestra tabla.//creamos una variable para referenciar a nuesto objeto
var mySelectionModel = new Ext.grid.CheckboxSelectionModel({singleSelect: false});
//nuestra grilla quedaria finalmente así
var grid = new Ext.grid.GridPanel({
title:'Listado de Compañias',
store: store,
renderTo: document.body,
cm: myColumnModel, //referencia al columnModel
sm: mySelectionModel, //referencia al selectionModel
stripeRows: true,
height:250,
width:500
});
Características de una tabla en Ext JS
Conclusiones
Hoy hemos creado una tabla simple que lee datos de un Array por medio de un "ArrayStore", luego se crea la tabla y se asocian las columnas del store por medio de la propiedad "columns" de la tabla o creando un "ColumnModel" y finalmente agregamos un "SelectionModel" para gestionar la forma de selección de las filas, próximamente veremos como usar diferentes tipos de store, usar eventos en el store, así como la tabla y el "selecionModel". Si tienes alguna duda o comentario, inscríbete en el foro y participa. No olvides de seguir nuestras actualizaciones por Twitter (@quizzpot).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.
15Comentarios
Agredecimientos especiales para Jonathan Lara (<a href="http://twitter.com/jonathanlarav" rel="nofollow">@jonathanlarav</a>) por su colaboración en este curso. Gracias :D
Sigo preguntandome si en la version 3.0.0 de Ext JS sigue haciendo falta la sentencia: Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif'; Si no se inserta en la ejecución del código ya no se ven peticiones al sitio de extjs para conseguir dicha imagen. Saludos.
Asi es mi amigo Elías, en la version 3.0 de ExtJs se sigue utilizando, es una manera de garantizar que los diseños no se distorcionen :). Saludos
hola que tal como edito tablas en un grid panel usando jsp me gustaria la colaboracion
creo que solo se puede en php sin envargo si tendria que ser en jsp como tendria que ser haber si teneis un ejemplito estaria muy agradecido
Realmente la implementación en el servidor puede ser con cualquier lenguaje, digase Java, PHP, Ruby, Groovy, etc... lo único que debes tener en cuenta es la manera en como se comunican los componentes de ExtJS con el servidor. Es posible que en futuros tutoriales haya ejemplos en Java/JSP. Saludos
Excelente tutorial, pero tengo una duda como hago para que me pueda leer los datos con tildes y la ñ, pero es raro cuando uso la propiaedad columns si me funcionan bien las tildes y demás, pero cuando lo hago a través del objeto ColumnModel ya no funcionan las tildes y demás, alguna idea de como resolver esto
Hola muy buen tutorial, pero me nace una duda, el array bidimensional de datos puede ser un array de objetos a mi parecer tiene más lógica.
Ahi tendrías que usar el JsonReader
Hola a todos, queria hacer una pregunta, como lograste hacer que la fila numero 5 (American International Group, Inc.) saliera con los 3 puntos suspensivos. Yo conozco que existe la función ellipsis de ExtJS pero el problema es cuando llamarla.
hiii!!! Crysfel podrias ayudarme? en este ejemplo como se haria para que la columna de los chekcBox (columnModel) no se mueva cuando me tenga que desplazar horizontalmente por un scroll? ojala puedas ayudarme Gracias!
Hola soy nuevo en ExtJS pero con estos tuto voy aprendiendo algo. Sin embargo tengo una duda y necesito aclararla. Tengo una ventana que en la parte izquierda tiene un tree que hace referencia a atributos en una BD y en la parte derecha tengo un panel vacio. Lo que necesito es hacer un drag and drop de esos atributos y que cuando suelte en el lado derecho se me construya un grid con ese atributo y a la vez con todos los datos de la BD correspondientes a él. Pero cuando lance otro atributo tiene que añadirse al grid además del que tenía anteriormente...
Buenas Tardes: Mira yo lo que tengo son dos grids panel y me gustaria saber de que forma controlo los registros si paso de uno a otro, quiero que al guardar me verifique si hubo cambios en los grids
Amigos, para ext js 4, esto: "var mySelectionModel = new Ext.grid.CheckboxSelectionModel({singleSelect: false});"... no les va a funcionar Yo lo he puesto asi: var sm = new Ext.create('Ext.selection.CheckboxModel', { checkOnly: true }); Y en el grid le agregan: var grid = new Ext.grid.GridPanel({ title: 'Compañias', store: store, renderTo: 'capaprim', selModel: sm, border: true, columns: [ {xtype: 'rownumberer'}, //un número en cada fila (Aca establece el numero de cada fila) {id: 'company', header: "Compañia", width: 160, sortable: true, dataIndex: 'company'}, {header: "Precio", width: 75, sortable: true, dataIndex: 'price'}, {header: "Cambio", width: 75, sortable: true, dataIndex: 'change'}, {header: "% Cambio", width: 85, sortable: true, dataIndex: 'pctChange'}, {header: "Actualizado", width: 85, sortable: true, renderer:Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'updated'} ], stripeRows: true, height: 250, width: 550 });
tengo un formulario y que al registrar los datos me los envia a un grid que lo tengo con checkboxmodel...mi pregunta es si al agregar un nuevo registro, ese registro quede con el checkbox activado??