Archive

Archive for February, 2009

Ext component dentro de un Tab Panel – Parte 1

February 28th, 2009 javier 3 comments

Datagrids

Usando Extjs desde hace algun tiempo, no era tan descabellado pensar que se necesitaría meter un componente como una grilla dentro de un tab panel, window panel o solamente un panel comun y corriente. En este Post vamos a repazar como hacerlo y, para este ejemplo vamos a hacerlo con nuestro amigo el Tab Panel.

Estuve haciendo una aplicación para la que fue necesario mostrar 2 grills con información diferente dentro de una misma pagina. Tenía que tener información de cierto tipo pero separada en 2 categorías, vamos a llamarlas : Categoría A y Categoría B.

Esto significaba una excelente oportunidad para hacer uso del tab panel. Lo que vamos a hacer es usar el incomparable Extjs para generar, dentro de una capa, un tab panel con 2 tabs y una grilla diferente para cada tab. Lo interesante de este simple ejemplo es que cada grilla va a tener información diferente y la manera de cargar dicha data puede ser via XML, llamando a un php para que envíe JSON o simplemente llenar un arreglo con data estática. Para este ejemplo utilizaremos las maravillas de php con json y lo mostraremos en la segunda parte de este tutorial!!!

Lo primero que necesitamos es hechar a andar nuestra aplicación con Ext, si aun no lo tienes o no sabes de que estamos hablando descargalo aqui. Para los que conocen Ext a la perfección, este ejemplo resultará demasiado simple para su vasta sabiduría y, por consiguiente puede no gustarles. Si este es el caso entonces… lo lamento.

No vamos a explicar como funciona Ext desde cero ya que esta totalemente fuera del alcance y enfoque de este tutorial. Pero mas adelante explicaremos como se utilizan algunas de sus interesantes características.

Primero lo primero

Realmente, lo primero que debemos hacer es construir el Tab panel. Para esto, solamente necesitamos crear un documento html, poner una capa (div) dentro, ponerle ID a la capa, llamar a las librerías necesarias para que nuestro amigo Ext funcione increiblemente y por último, construir nuesto sumamente positivo TabPanel.

El código de todo lo puedes descargar aqui, pero te recomiendo que sigas leyendo para que sepas que cosa modificar a menos que seas alguien mas positivo aun y puedas entender el código. Si eres uno de ellos entonces… Felicitaciones!

<script type="text/javascript"><pre lang="javascript"><script type="text/javascript"><script language="javascript" type="text/javascript">
Ext.onReady(function(){	
	// Se instancia tabs2 y se construye como un TabPanel
	var tabs2 = new Ext.TabPanel({ 
        activeTab: 0, //El tab activo será el primero
        width:677,  // Configuramos ancho
        height:350, // Configuramos alto
        plain:true,
        defaults:{autoScroll: true}, //Autoscroll en true
		// Se añaden los Items que en este caso seran 2
		items:[{	
				html:"Estamos aqui",
				title: "Categoria 1"
		},{
				html: "<a>Estamos aqui</a>",
				title: "Categoria B"			
		}]
		//items:[grid, grid2]
    });//Renderizamos el tabpanel en la capa 'tabpanel'
		tabs2.render('tabpanel');  
});
</script>

Genial!, en el código de arriba podemos ver varias cosas. Concentrémonos en las primeras lineas. He tratado de comentar las lineas mas relevantes para que puedan mostrar lo que estoy haciendo a medida que vamos progrmando pero he aqui la descripción y meollo del asunto.
La función Ext.onReady() se dispara justo despues de que Ext se haya cargado correctamente. Si Ext no ha cargado, probablemente muestre un mensaje de error y no se pueda continuar. En nuestro caso todo ha marchado de acuerdo con el plan y podemos observar los resultados un poco mas abajo.
No voy a detallar el código HTML y CSS porque sale del enfoque de nuestro tutorial. Mas adelante haremos un tutorial de consejos para html y css. Dicho sea de paso estos 2 temas son sumamente vastos y merecen gran detalle, tiempo, lagrimas, sudor, sangre y demas secreciones para poder ser completamente dominados.
Nosotros volvamos a lo nuesto JAVASCRIPT!!!!

Lo que estamos haciendo es crear un tab panel instanciando una variable tabs2, luego configuramos algunos parametros como ancho, alto, tab por defecto, etc..
La parte interesante esta en Items, ahora Items es el parametro en donde vamos a definir que cosa queremos meter en un panel. En Ext un tabpanel es un Container, dentro de un Container podemos meter un Component o componentes. Para entender esto mejor les recomiendo fuertemente que lean la documentación de Ext. Como me dijeron una vez en los foros ; "Por favor lee la documentacion de los APIS nos hemos tomado mucho tiempo haciendolos".

No me da la gana de leer los apis porque soy "el mas necio"

Si no te gusta leer mucho al menos lee las FAQ (Frequently asked questions) o visita el foro para leer acerca de dudas acerca de los componentes. Una vez mas les recomiendo que lean la documentacion. Esta puede ser encontrada aquí.

Finalmente renderizamos nuesto Tabpanel en la capa que creamos dentro del documento HTML. Nuestra capa puede lucir de esta manera

<div class="tabpanel" id="tabpanel"></div>

Actualmente dentro de nuestro TabPanel existen 2 items. Practicamente son 2 tabs con un título y dentro de ellos un código HTML pequeño. Si observan con atención, verán que el codigo comentado dice

//items:[grid, grid2]

Es esto a lo que queremos llegar, para esto vamos a construir 2 grillas, iguales en este ejemplo pero cargando información diferente.

Segundo paso: Construir los DataGrids

Aqui vamos a instancias 2 datagrids iguales, voy a explicar uno y el otro lo van a hacer ustedes (sino no hay chiste o si?). Para esta parte voy a tomar el ejemplo de "Simple DataGrid" que se encuentra en los ejemplos de Ext. La idea es que se entienda como modificarlos para poder tenerlos dentro de un container que, en este caso será nuestro Tab Panel.
Para crear el o los Datagrids necesitamos 3 cosas indispensables :

  • Los Datos
  • El DataStore
  • El DataGrid

En este código vamos a hacerlo paso a paso para lo que utilizaremos los datos en un arreglo unidimensional común y corriente. Luego crearemos el DataStore que cargará los datos de ese arreglo y mostrara la información en el DataGrid apenas sea llamado por éste. He aqui el código:

//Datos estáticos a mostrar
    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&amp;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'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
        ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
        ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
        ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
        ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
        ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
        ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
        ['Johnson &amp; Johnson',64.72,0.06,0.09,'9/1 12:00am'],
        ['JP Morgan &amp; Chase &amp; Co',45.73,0.07,0.15,'9/1 12:00am'],
        ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
        ['Merck &amp; Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
        ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
        ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
        ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
        ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
        ['The Procter &amp; Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
        ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
        ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
        ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
    ];
 
    // Comenzamos a configurar el DataStore
    var store = new Ext.data.SimpleStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });
    store.loadData(myData);// El Store carga la información del arreglo myData que esta instanciado arriba
 
    // Creamos el DataGrid
    var grid = new Ext.grid.GridPanel({
        store: store, //Aqui estamos cargando el Data Store
        columns: [ // Las columnas
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,
        title:'Datagrid 1' // titulo del Data Grid
    });

Este código no funciona Embustero!

Exacto, y esto se debe a que faltan 2 métodos importantes que no incluí para darle énfasis a la estructura de nuestra modestísima aplicación que fue creada por Extjs.com. A decir verdad, este ejemplo es el mas simple de los datagrids y se llama SimpleDatagrid. El aporte que añadimos nosotros es meterlo dentro de un TabPanel para que sea mas interesante.

Lo que estamos haciendo aquí es crear un arreglo con contenido estático, crear un Datastroe, cargando el Datastore con la información del arreglo y por ultimo creando un Datagrid que carga el DataStore como su fuente de datos. No copien el código que esta aquí. Si quieres experimentar la aplicacion y descargarla puedes hacerlo aqui y aqui.

En la aplicación tenemos 2 grillas en 2 tabs. Lo que se debe hacer es crear 2 datagrids con 2 stores y 2 arreglos diferentes. Pusimos el ejemplo de 1 solo datagrid, ahora tu debes hacerlo de tal manera que queden 2 tabs. Si no quieres hacerlo descarga el Zip en el link anterior y revisa el código fuente para que lo veas mejor.

El próximo tutorial mostrará la manera de usar un datastore mas avanzado para cargar los datos desde un php y enviarlos en JSON para que el data grid cargue la información dinamicamente. Para esto necesitaremos un servidor Web que puede ser Apache.

Eso es todo, espero que les sirva y comenten cualquier duda que tengan!

Jmc.

Categories: Extjs, Javascript Tags: , ,