Blog

Ya vimos como llenar un formulario de Ext JS a través de un record, el día de hoy lo llenaremos sacando la información a través de una petición Ajax al servidor.

Material de Apoyo

Antes de continuar vamos a descargar el material de apoyo, el cual consta de tres archivos y una carpeta que contiene imágenes, debes copiar estos archivos al servidor Web en el que hemos estado trabajando, recuerda que esto es muy importante para que podamos utilizar Ajax.

Demostración

En el ejercicio de hoy vamos a generar dinámicamente el “Top Ten” de las películas mas vistas en lo que va del 2009, luego al dar clic sobre alguna de estas aparecerá un formulario el cual se cargará haciendo una petición al servidor a través de Ajax, puedes ver la demostración de lo que tendremos cuando terminemos este tutorial.

Información

Lo más importante en una aplicación es la información, en esta ocasión (y como siempre lo hemos hecho) la información está contenida en un arreglo en el servidor, pero recuerda que puede provenir de una base de datos como MySql, PostgreSQL, Oracle, de algún servicio Web (Web Service) o de cualquier otro lugar.

<?php
	header("Content-Type: text/plain"); 

	$all = isset($_GET['all']);
	$movie = isset($_POST['id'])?$_POST['id']:rand(0,9);

	$data = array(
			array('title'=>'G-Force','year'=>2009,'revenues'=>32.2,'comment'=>'Very good movie, it is an awesome movie','available'=>true,'img'=>'images/gforce.jpg'),
			array('title'=>'Harry Potter and the Half-Blood Prince','year'=>2009,'revenues'=>30,'comment'=>'Not to good, but it is ok','available'=>true,'img'=>'images/hpotter.jpg'),
			array('title'=>'The Ugly Truth','year'=>2009,'revenues'=>27,'comment'=>'Another comment to the movie','available'=>false,'img'=>'images/ugly.jpg'),
			array('title'=>'Orphan','year'=>2009,'revenues'=>12.8,'comment'=>'Testing the comment','available'=>'images/orphan.jpg','img'=>'images/orphan.jpg'),
			array('title'=>'Ice Age: Dawn of the Dinosaurs ','year'=>2009,'revenues'=>8.2,'comment'=>'Awesome movie, really good','available'=>true,'img'=>'images/ice.jpg'),
			array('title'=>'Transformers: Revenge of the Fallen','year'=>2009,'revenues'=>8,'comment'=>'Another test','available'=>false,'img'=>'images/transformers.jpg'),
			array('title'=>'The Hangover','year'=>2009,'revenues'=>6.46,'comment'=>'Testing','available'=>true,'img'=>'images/hangover.jpg'),
			array('title'=>'The Proposal','year'=>2009,'revenues'=>6.42,'comment'=>'Comment','available'=>true,'img'=>'images/proposal.jpg'),
			array('title'=>'Public Enemies','year'=>2009,'revenues'=>4.17,'comment'=>'One more comment','available'=>false,'img'=>'images/public.jpg'),
			array('title'=>'Brüno','year'=>2009,'revenues'=>2.72,'comment'=>'nothing to say','available'=>false,'img'=>'images/bruno.jpg')

	);

	if($all){
		$info = $data;
	}else{
		$info = array(
			'success'=>true,
			'data'=> $data[$movie]
		);
	}

	echo json_encode($info);
?>

Lo más importante a mencionar en el código anterior es lo que se imprime dependiendo del parámetro “all”, ya que si es enviado en la petición imprimirá todo el arreglo de objetos en formato “json”, si no está presente se asume que se está solicitando específicamente un elemento.

Solicitar la información al servidor

Si en estos momentos ejecutas el HTML en tu explorador veras que solamente aparece el titulo, lo que tenemos que hacer es solicitar la información que vamos a desplegar utilizando Ajax, dentro del método “init” del objeto principal vamos a realizar esta petición de la siguiente manera:

Ext.Ajax.request({
	url: 'loadform.php',
	params: {all:true}, //solicitamos todos los registros
	method: 'GET', //utilizando el método GET
	scope: this,
	success: this.createTopTen //e indicamos la función que procesará la respuesta
});

Como hemos solicitado todos los registros obtenemos el siguiente resultado:

[{"title":"G-Force","year":2009,"revenues":32.2,"comment":"Very good movie, it is an awesome movie","available":true,"img":"images\/gforce.jpg"},{"title":"Harry Potter and the Half-Blood Prince","year":2009,"revenues":30,"comment":"Not to good, but it is ok","available":true,"img":"images\/hpotter.jpg"},{"title":"The Ugly Truth","year":2009,"revenues":27,"comment":"Another comment to the movie","available":false,"img":"images\/ugly.jpg"},{"title":"Orphan","year":2009,"revenues":12.8,"comment":"Testing the comment","available":"images\/orphan.jpg","img":"images\/orphan.jpg"},{"title":"Ice Age: Dawn of the Dinosaurs ","year":2009,"revenues":8.2,"comment":"Awesome movie, really good","available":true,"img":"images\/ice.jpg"},{"title":"Transformers: Revenge of the Fallen","year":2009,"revenues":8,"comment":"Another test","available":false,"img":"images\/transformers.jpg"},{"title":"The Hangover","year":2009,"revenues":6.46,"comment":"Testing","available":true,"img":"images\/hangover.jpg"},{"title":"The Proposal","year":2009,"revenues":6.42,"comment":"Comment","available":true,"img":"images\/proposal.jpg"},{"title":"Public Enemies","year":2009,"revenues":4.17,"comment":"One more comment","available":false,"img":"images\/public.jpg"},{"title":"Br\u00fcno","year":2009,"revenues":2.72,"comment":"nothing to say","available":false,"img":"images\/bruno.jpg"}]

Crear la lista del “Top Ten”

Con la información que recibimos podemos crear la lista del “Top Ten”, vamos a implementar la función “createTopTen” donde primeramente decodificamos el JSON para poder utilizarlo correctamente y luego mediante la clase “DomHelper” vamos a generar e insertar los nodos al DOM.

var info = Ext.decode(response.responseText); //decodificamos el texto que recibimos
Ext.each(info,function(movie){ //iteramos la información recibida
	Ext.DomHelper.append('content',{ //y creamos una imagen para cada elemento
		tag:'img',
		src:movie.img,
		alt:movie.title,
		title:movie.title,
		cls: 'movie'
	});
},this);

Hemos estudiado previamente la clase “Ext.DomHelper”, por lo tanto debemos estar familiarizados con su uso, de no ser así te recomiendo repasar el tema donde estudiamos esta clase.

Agregar “listeners” a las imágenes

Lo siguiente que necesitamos hacer es agregar un “listener” al evento “clic” de cada imagen que creamos, para que podamos mostrar el formulario con la información adecuada.

Justo después de crear las imágenes vamos a seleccionar los nodos del DOM, las iteramos y le agregamos el evento a cada una.

var items = Ext.DomQuery.select('div[id=content] > img');
Ext.each(items,function(el,i){
	el = Ext.get(el);
	el.on('click',function(){
		this.showDetail(i); //esta función será disparada cuando se dé clic a una imagen
	},this);
},this);

En el código anterior podemos ver que se disparará la función “showDetail(i);” cuando se de clic sobre alguna imagen, es importante mencionar que está recibiendo un parámetro “i” el cual indica el “id” de la imagen en la que se ha dado clic, esto nos servirá para solicitar la información correspondiente al servidor.

Crear el formulario

Es momento de crear el formulario dentro de la función “showDetail” de la siguiente manera:

var form = new Ext.form.FormPanel({
	url: 'loadform.php', //la URL de donde vamos a llenar el formulario
	border:false,
	labelWidth: 80,
	defaults: {
		xtype:'textfield',
		width: 150
	},
	items:[
		{fieldLabel:'Title',name:'title'},
		{xtype:'combo',fieldLabel:'Year',name:'year',triggerAction:'all',store:[2009,2008,2007,2006]},
		{xtype:'numberfield',fieldLabel:'Revenues',name:'revenues'},
		{xtype:'textarea',fieldLabel:'Comment',name:'comment'},
		{xtype:'checkbox',fieldLabel:'',labelSeparator:'',boxLabel:'Available',name:'available'}
	]
});

A estas alturas del curso debemos estar completamente familiarizados con el código anterior, lo único diferente y que es importante mencionar es la propiedad “url” en la cual se configura la “url” donde haremos la petición Ajax para llenar el formulario, además es importante notar que usamos la propiedad “name” en los campos del formulario.

Lo siguiente que debemos hacer es crear la ventana que contendrá el formulario anterior.

var win = new Ext.Window({
	title: 'Loading data into a form',
	bodyStyle: 'padding:10px;background-color:#fff;',
	width:300,
	height:270,
	items:[form],
	buttons: [{text:'Save'},{text:'Cancel'}]
});

win.show();

Si en este momento damos clic sobre cualquier imagen veremos algo semejante a la siguiente imagen.

Solicitar la información al servidor

Ya creamos el formulario y aparece al momento de dar clic sobre cada imagen, lo siguiente que haremos es llenarlo con la información correspondiente a la imagen solicitada, esto es muy sencillo ya que simplemente invocamos el método “load” con los parámetros necesarios:

form.getForm().load({params:{id:id}});

Debemos recordar que el formato JSON que debe regresar el servidor con la información es el siguiente:

{
	"success":true,
	"data":{"title":"The Proposal","year":2009,"revenues":6.42,"comment":"Comment","available":true,"img":"images\/proposal.jpg"}
}

Es de suma importancia regresar el parámetro “success” en “true” (si no ha sucedido ningún error) para que se llene correctamente el formulario, de lo contrario el componente asume que se ocasionó algún error en el servidor y no lo llenará.

Conclusiones

Hoy aprendimos a llenar el formulario mediante una llamada Ajax al servidor, es muy importante que la respuesta contenga la propiedad “success:true” para que funcione correctamente, desde mi punto de vista (muy personal) no me agrada que el componente nos obligue a realizar esto, sería mejor utilizar algún estado http para detectar si se ha ocasionado un error, de esta manera podríamos desarrollar nuestras aplicaciones utilizando complemente “REST” (más adelante hablaré al respecto).

Como siempre si tienen dudas o sugerencias pueden hacerla en los foros, además recuerden seguirnos en Twitter (@quizzpot) para estar al tanto de las actualizaciones o bien si utilizas algún lector de RSS inscríbete a las Feeds o a déjanos tu correo electrónico y te mandaremos las actualizaciones allí.