Blog

Ya vimos como leer el contenido de una carpeta en el servidor con PHP y también lo desplegamos en un TreePanel utilizando Ajax, en este tutorial haremos exactamente lo mismo pero le agregaremos la funcionalidad de permitir al usuario ver en un panel el contenido del archivo seleccinado, sea una imagen, un archivo de texto, un Html o inclusive un Pdf.

He preparado una demostración de lo que obtendremos al final de este tutorial, te recomiendo le des un vistazo para tener una idea clara de lo que estaremos haciendo.

Material de apoyo

El material de apoyo es el código que escribimos en el tutorial anterior, trabajaremos sobre lo hecho para evitar explicaciones, no modificaremos el archivo PHP que lee los archivos, solo modificaremos el JavaScript.

Una vez que copiemos todos los archivos que descargamos podremos ver algo como la siguiente imagen en nuestro explorador:

Creando el Layout

Primero vamos a crear el layout que tendrá nuestra aplicación, necesitamos que en la parte izquierda aparezca el TreePanel y en la parte derecha aparezca el panel donde cargaremos el contenido de cada archivo.

Vamos a modificar el código de la ventana de la siguiente manera.

var win = new Ext.Window({
	title:'Reading files example',
	layout:'border', 		// Step 1
	width:600,			// Step 2
	height:400,
	items: tree
});
win.show();

En el paso uno cambiamos el layout de “fit” a “border”, recordemos que con el valor “fit” el contenido de la ventana se ajustará a las dimensiones de la misma ventana, pero ahora si usamos el layout “border” podremos crear “regiones” dentro de la ventana, en tutoriales siguientes explicaré más a detalle esto, por ahora es suficiente.

En el paso dos cambiamos las dimensiones de la ventana, dando espacio para agregar el panel donde se desplegará el contenido de cada archivo.

Crear las regiones

Cuando usamos un layout de tipo “border” es necesario definir las regiones que contendrá, es importante mencionar que debemos crear una región “center” obligatoriamente, de lo contrario aparecerá un error como el siguiente:

uncaught exception: No center region defined in BorderLayout ext-comp-1002

El layout de tipo “border” cuenta con cinco regiones, norte (north), sur (south), este (east), oeste (west) y centro (center), ya sabemos que la región central es obligatoria, para este ejemplo usaremos la región “oeste” para colocar el TreePanel y la región “central” para poner el contenido del archivo seleccionado.

var tree = new Ext.tree.TreePanel({
	region:'west',		// Step 1
	border: false,
	autoScroll:true,
	dataUrl:'get-files.php',
	root: new Ext.tree.AsyncTreeNode({
		id:'.',
		text: 'User files'
	})
});

var main = new Ext.Panel({
	region:'center',		// Step 2
	layout:'fit',
	border:false
});

var win = new Ext.Window({
	title:'Reading files example',
	layout:'border',
	width:600,
	height:400,
	items: [tree,main] 	// Step 3
});

En el paso uno le asignamos al TreePanel la región “west”, con esto se alineará en la parte izquierda de la ventana contenedora.

En el paso dos creamos el panel central, aquí no hay nada diferente solamente la región es lo que debemos poner atención.

En el paso tres le asignamos a la ventana los dos elementos que necesitamos que contenga, si creamos más regiones aquí las asignaríamos.

Permitir que se redimensione el TreePanel

Vamos asignarle algunas otras configuraciones al TreePanel con el fin de que el usuario pueda cambiar su tamaño y que también lo pueda ocultar.

var tree = new Ext.tree.TreePanel({
	region:'west',
	split:true,		// Step 1
	collapsible:true,	// Step 2
title:'Files',		// Step 3
	width:130,
	border: false,
	autoScroll:true,
	dataUrl:'get-files.php',
	root: new Ext.tree.AsyncTreeNode({
		id:'.',
		text: 'User files'
	})
});

En el paso uno hicimos que el panel se pueda redimensionar, con esto permitimos que el usuario tenga la capacidad de cambiar el ancho del panel.

En el paso dos hacemos que el panel pueda colapsarse, esto permite que pueda ocultarse para tener más espacio y ver mejor el contenido principal.

En el paso tres le asignamos un título y también hemos cambiado la dimensión inicial.

Al actualizar el explorador podremos redimensionar el TreePanel y veremos algo como la siguiente imagen:

Y si damos click sobre la flecha que se encuentra en el título del TreePanel, éste se colapsará de la siguiente manera:

Desplegando el contenido de los archivos

Hasta ahora nuestra aplicación no hace nada, solo despliega los archivos que el servidor nos permite ver, necesitamos agregar más interacción para el usuario y esto lo logramos asignándole los eventos adecuados a los componentes.

tree.on('click',function(node){
	// Solicitar el contenido del nodo seleccionado
});

En el código anterior estamos asignándole un listener al evento “click” del TreePanel, de esta manera cuando el usuario seleccione un archivo la función que definimos será ejecutada y recibirá como parámetro el “nodo” seleccionado.

Lo siguiente es desplegar el archivo seleccionado, para esto usaremos un “iframe” al cual le asignaremos la “url” que contiene el nodo.

// Step 1
var el = Ext.get(Ext.DomQuery.select('.x-panel-body',main.el.dom)[0]);

el.createChild({		// Step 2
	tag:'iframe',
	src:'files/'+node.id,
	style:'border:none;width:100%;height:100%;'
});

En el paso uno obtenemos el div del panel central, este div es necesario pues ahí es donde colocaremos el “iframe”.

En el paso dos creamos un “iframe” dentro del div que tomamos anteriormente, este “iframe” que apunta hacia el documento seleccionado, también le agregamos algunos estilos.

Ya podemos desplegar el contenido de los archivos, pero tenemos un problema, una vez que seleccionamos un archivo al dar clic sobre otros ya no se despliegan en el panel principal, esto sucede porque los iFrames se van creando por debajo de los anteriores, para solucionar este problema solamente tenemos que eliminar los iFrames anteriores.

tree.on('click',function(node){
	var el = Ext.get(Ext.DomQuery.select('.x-panel-body',main.el.dom)[0]);

	while (el.dom.childNodes[0]){			// Step 1
		el.dom.removeChild(el.dom.childNodes[0]);	//Step 2
	}

	el.createChild({
		tag:'iframe',
		src:'files/'+node.id,
		style:'border:none;width:100%;height:100%;'
	});
});

En el paso uno creamos un ciclo que se estará ejecutando hasta que no haya más elementos dentro del div principal.

En el paso dos eliminamos el primer nodo del div principal.

Ahora si funciona correctamente nuestra aplicación, podemos ver el contenido de los archivos que tenemos en el servidor.

Conclusión

En este tema vimos como crear una layout de tipo “border”, no entramos en detalles sobre este tipo de layout ya que la idea es hacerlo más adelante, también vimos como utilizar el evento “click” en un TreePanel.

Síguenos en Twitter para estar al tanto de las actualizaciones en el sitio.