En esta ocasión veremos cómo podemos hacer nuestros “Grids” un poco más dinámicos, esto lo haremos al cargar todo la información desde nuestra base de datos, incluyendo la información necesaria para los “headers” del “Grid”. En este tutorial veremos cómo podemos cargar dinámicamente la propiedad “header” de un “Grid”, con la finalidad de hacer nuestro código de una manera más eficiente y dinámico dando posibilidad de poder definir las columnas de manera dinámica. Esta es una muestra de lo que se obtendrá al final de este tutorial. Recuerda que puedes descargar el código fuente si es necesario.

La base de datos

En esta ocasión la información que usaremos está en una tabla llamada “grid” la cual contiene la información necesaria para cumplir con nuestro objetivo final. El código para generar esta tabla se muestra a continuación:

-- phpMyAdmin SQL Dump
-- version 3.2.0.1
-- http://www.phpmyadmin.net
-- Servidor: localhost
-- Tiempo de generación: 24-10-2010 a las 06:19:17
-- Versión del servidor: 5.1.36
-- Versión de PHP: 5.3.0
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
-- Base de datos: `test`
-- -------------------------------------------------------
--
-- Estructura de tabla para la tabla `grids`
CREATE TABLE IF NOT EXISTS `grids` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `Name` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `Lastname` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `Age` int(3) NOT NULL,
  `Nationality` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `Sex` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  `ZipCode` varchar(15) COLLATE utf8_unicode_ci NOT NULL,
  `Address` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=2 ;
--
-- Volcar la base de datos para la tabla `grids`
--

INSERT INTO `grids` (`id`, `Name`, `Lastname`, `Age`, `Sex`, `ZipCode`, `Address`) VALUES
(1, 'John', 'Smith', 20, 'Male', '50300', 'at home'),
(2, 'Nicole', 'Summer', 22, 'Female', '55687', 'somewhere');

La base de datos la he llamado “test”, pero puedes usar el nombre que gustes, solamente cuando se haga la conexión mediante PHP recuerda ponerle el nombre correcto.

Exponer la información

Como sabemos la información es una parte muy importante en una aplicación, en esta ocasión obtendremos esta información desde nuestra base de datos, por lo cual tenemos que hacer la conexión via PHP y un query para poder obtenerla.

<?php	//step 1
	$connection= mysql_connect("localhost","root","") or die("Connection Failed".mysql_error());
	mysql_select_db("test",$connection)or die("Error loading the DataBase".mysql_error());
	//step 2
	$result= mysql_query("SELECT * FROM grids");
	
	$data = array();
	//step 3
	while($row = mysql_fetch_array($result)){	
		array_push($data, array(
			"id" 		=> $row["id"],
			"name" 		=> $row["Name"],
			"lastname"	=> $row["Lastname"],
			"age" 		=> $row["Age"],
			"sex"		=> $row["Sex"],
			"zip" 		=> $row["ZipCode"],
			"address" 	=> $row["Address"],
		));
	}
	//step 4
	$fields=array(
		array("name" => "id"),
		array("name" => "name","header"	=>"Name"),
		array("name" => "lastname","header"	=>"Lastname"),
		array("name" => "age","header"	=>"Age"),
		array("name" => "sex","header"	=>"Sex"),
		array("name" => "zip","header"	=>"ZipCode"),
		array("name" => "address","header"	=>"Address"),
	);
	//step 5
	$metadata = array(
		"totalProperty"	=> "results",
		"successProperty"	=> "success",
		"idProperty"	=> "id",
		"fields"		=> $fields,
		"root"		=> "data"
	);
	//step 6
	echo json_encode(
		array(  
		"success"	=> true,
		"metaData"	=> $metadata,
		"data"		=> $data
	));

En el paso uno se realiza la conexión a la base de datos, recuerda que debes poner las credenciales adecuadas así como la base de datos que usarás, en mi caso es “test”. En el paso dos se crea el query que regresa toda la información de la tabla “grids”. En el paso tres se itera el resultset que regresó la consulta, dentro del ciclo creamos un arreglo con la información que contiene la tabla. Hasta este momento la estructura del documento es conocida, lo interesante viene en el paso cuatro. En el paso cuatro se crea un nuevo arreglo llamado “fields”, este arreglo lo que contiene son los nombres de los campos que conforman nuestra tabla “grids”. En el paso cinco se crea el arreglo. En el paso seis imprimimos la información en formato Json, la respuesta será semejante al siguiente ejemplo:

{"success":true,"metaData":{"totalProperty":"results","successProperty":"success","idProperty":"id","fields":[{"name":"id"},{"name":"name","header":"Name"},{"name":"lastname","header":"Lastname"},{"name":"age","header":"Age"},{"name":"sex","header":"Sex"},{"name":"zip","header":"ZipCode"},{"name":"address","header":"Address"}],"root":"data"},"data":[{"id":"1","name":"John","lastname":"Smith","age":"20","sex":"Male","zip":"50300","address":"at home"}]}

Encapsulando el código

Ahora pasamos a la parte de JavaScript donde en primer lugar es necesario encapsular el código para evitar problemas en el futuro, así que crearemos un objeto donde alojaremos el código del tutorial.

Ext.ns("com.quizzpot.tutorial");
com.quizzpot.tutorial.Grid= {

       init :  function(){
        //initial code goes here
        }
}
Ext.onReady(com.quizzpot.tutorial.grid.init,com.quizzpot.tutorial. Grid);

La función “init” se ejecutará tan pronto como el DOM esté listo, por lo tanto ahí debemos colocar el código que necesitamos ejecutar primero.

Solicitando la información al servidor

Lo que haremos a continuación es solicitar la información al servidor para poder mostrarla, ya dentro de la función “init” haremos lo siguiente:

	//step 1
	this.store = new Ext.data.JsonStore({
		url : "grid.php"
	});
	//step 2
	this.store.on("load",this.createGrid,this);
	this.store.on("loadexception",this.error,this);
	this.store.load();	
	},

En el paso uno lo que hacemos es crear el “JsonStore” con el cual solicitamos la información al servidor, lo interesante de esto es que el “JsonStore” no recibe ningún parámetro más que “url”, esto es porque si recordamos en el archivo PHP que creamos hace unos instantes contiene los demás parámetros para el “store”. En el paso dos antes de hacer la petición al servidor tenemos dos eventos “load” y “loadexception”, el primer evento se lleva a cabo cuando el “store” hará la petición al servidor y el segundo será ejecutado si es que algo sale mal mientras el “store” es cargado. Ambos tienen una función que se encarga de hacer lo necesario para cada uno de estos eventos.

Función “createGrid”

La función del evento “load” lo que hace es crear el “Grid” con la información que el servidor regresó, esto lo haremos de la siguiente manera:

createGrid : function(Store,records,options,groups){
	var cm = []; //step 1
		
	Ext.each(this.store.fields.items,function(data){ //step 2
		if(data.name !== "id"){
			cm.push({header:data.header,dataIndex:data.name,sortable:true}); //step 3
		}
});
//…. Seguiremos escribiendo aquí
}

Creamos la función “createGrid” como normalmente lo hacemos, solo que en esta ocasión le pasamos como parámetros lo que nos regresa el evento “load”. En el paso uno creamos un arreglo llamado “cm”, el cual lo usaremos para colocar dinámicamente los “headers” de las columnas para nuestro “Grid”. En el paso dos iteramos la respuesta del servidor, comprobamos en cada iteración que el siguiente campo en la respuesta no sea un “id”. Puedes ver que al arreglo “cm” se le insertan los parámetros necesarios para formar el “header” de una columna, ya que este parámetro le asignamos “data.header” y a “dataIndex” le asignamos “data.name” recordando que esta información está especificada dentro de nuestro archivo PHP. Con esto tenemos la información necesaria para formar las cabeceras de las columnas del “Grid”, lo siguiente es crearlo y desplegarlo.

this.grid = new Ext.grid.GridPanel({  //step 1
store 		: this.store,
	columns 	: cm,
	border		: false,
	stripeRows	: true
});
		
this.win = new Ext.Window({  //step 2
	title 	: "Colums",
	layout	: "fit",
	width	: 500,
	height	: 300,
	items	: this.grid
});
this.win.show();

En el paso uno creamos el “Grid”, éste paso ya debería ser conocido para nosotros, pero como pudiste observar generalmente en el atributo “columns” colocamos todas las cabeceras de nuestras columnas, pero en esta ocasión le pasamos el arreglo “cm” que creamos y llenamos anteriormente. En el paso dos se crea la ventana en la cual mostraremos nuestro “Grid”.

Función “error”

Esta es la función del evento “loadexception”, lo único que haré en esta función es mandar la información que se generó, con el fin de poder buscar donde está el error y el porqué no se puede mostrar nuestra información. Esta función tiene la siguiente estructura:

error :function(){
console.debug(arguments)
}

Como mencionamos hace uno instantes lo único que hace esta función es mandar a consola la información por la cual se pudo originar el error.

Conclusión

En esta ocasión vimos que podemos crear las cabeceras de nuestro “Grid” de una manera más dinámica, esto resulta efectivo en grandes proyectos, ya que esto nos ayuda a simplificar y automatizar la creación de los “grids”. Si tienes algún comentario o sugerencia no dudes en comunicarnolos viá el formulario inferior, por el foro o en alguna de las redes sociales como Twitter y Facebook.

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!