Aprendiendo Ext JS 3

Una tabla básica con información cargada de un Array Más videos

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.

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

Imagen de una tabla básica

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'},
  	...
]);
Imagen de una tabla

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        
});
Imagen de una tabla

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.

¿Olvidaste tu contraseña?

15Comentarios

  • Avatar-12 Crysfel 08/06/2009

    Agredecimientos especiales para Jonathan Lara (<a href="http://twitter.com/jonathanlarav" rel="nofollow">@jonathanlarav</a>) por su colaboración en este curso. Gracias :D

    • Avatar-7 Elías Manchón 06/10/2009

      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.

      • Avatar-4 Elmer 12/11/2009

        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

        • Avatar-7 holaaa 18/11/2009

          hola que tal como edito tablas en un grid panel usando jsp me gustaria la colaboracion

          • Avatar-12 holaaa 18/11/2009

            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

            • Avatar-2 Crysfel 18/11/2009

              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

              • Avatar-9 Geovanni Escalante 31/07/2010

                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

                • Avatar-4 jamc 27/08/2010

                  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.

                  • Avatar-5 Crysfel 30/08/2010

                    Ahi tendrías que usar el JsonReader

                    • Avatar-10 Mario 24/02/2011

                      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.

                      • Avatar-3 are 12/05/2011

                        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!

                        • Avatar-7 Adrián Rosales Cruz 09/11/2011

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

                          • Avatar-4 miguel 26/04/2013

                            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

                            • Avatar-11 Senpai 02/04/2014

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

                              • Avatar-6 kevin 15/04/2014

                                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??

                                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.