Blog

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.

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.

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.

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

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

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