He recibido muchos mensajes solicitándome el código necesario para poder leer el sistema de archivos en el servidor e integrarlo a un TreePanel para que el usuario pueda administrar sus archivos, en este tutorial explico paso a paso como lograr esta integración. El día de hoy veremos cómo leer el contenido de una carpeta en el servidor (utilizando PHP) para luego poder desplegar esa información en un TreePanel utilizando Ajax para ir cargando dinámicamente el contenido de las carpetas.

Material de apoyo

Para continuar es necesario descargar el material de apoyo, el contiene unos íconos y algunos archivos que desplegaremos en el TreePanel, es necesario que copies todos estos archivos a un servidor Web y cambiar la ruta de la librería ExtJS si es necesario.

Leyendo el contenido de una carpeta

Voy a utilizar PHP para leer el contenido de la carpeta “files” la cual viene con el material de apoyo, dentro de esta carpeta existen varios archivos los cuales serán desplegados en un TreePanel. Vamos a editar el archivo “get-files.php” (viene en el material de apoyo) y escribiremos lo siguiente:

$root = 'files/';	//step 1
$node = isset($_REQUEST['node'])?$_REQUEST['node']:""; //step 2

En el paso uno se define la ruta de la carpeta que será expuesta al usuario, aquí podemos definir cualquier carpeta que necesitemos exponer, por ejemplo “/home/john/docs” o también “c:\users\john\docs”, para este ejemplo usaremos “files/” la cual debe estar en el mismo nivel que nuestro archivo “get-files.php”. En el segundo paso se está tomando el parámetro “node”, este parámetro contendrá la ruta dentro de la carpeta “files” que deseamos desplegar, recordemos que usaremos Ajax para ir cargando dinámicamente el contenido de cada carpeta conforme el usuario vaya navegando, esto es importante porque de esta manera haremos que nuestra aplicación solo cargue la información que el usuario solicita y por lo tanto mejoraremos el rendimiento. Ahora escribiremos lo siguiente:

if(strpos($node, '..') !== false){
    die('Nice try buddy.');
}

¡El código anterior es importantísimo! Ya que busca dentro de la variable “node” que no exista la secuencia de caracteres “..” ya que de existir un usuario malintencionado podría leer archivos que no debería poder ver, por ejemplo las credenciales de nuestra base de datos o cualquier otro archivo importante. Una vez que nos aseguramos que el parámetro “node” viene limpio nos preparamos para leer los archivos de la ruta que el usuario ha solicitado.

$nodes = array();
$d = dir($root.$node);		//step 1
while($f = $d->read()){		//step 2
    if($f == '.' || $f == '..' || substr($f, 0, 1) == '.') continue;	//step 3
    
    if(is_dir($root.$node.'/'.$f)){			//step 4
        array_push($nodes,array('text'=>$f, 'id'=>$node.'/'.$f));
    }else{
        array_push($nodes, array('text'=>$f, 'id'=>$node.'/'.$f, 'leaf'=>true,'iconCls'=>getIcon($f)));
    }
}
$d->close();			//step 5

En el paso uno usamos la función “dir” para abrir el directorio solicitado, primero asignamos la ruta principal y luego le concatenamos la ruta que el usuario solicitó. En el paso dos mediante un ciclo “while” leemos todos los archivos contenidos en el directorio que abrimos en el paso uno y colocamos cada archivo en la variable “f”. El paso tres es necesario para que no mostremos los directorios o archivos ocultos. En el paso cuatro verificamos que estamos agregándole al arreglo “nodes” la información de cada archivo, para eso primero verificamos que tipo de archivo es, si es un directorio o carpeta solamente le asignamos el texto que desplegará y el identificador que tendrá, puedes ver que como ID le asignamos la ruta que enviará al servidor, por otro lado, si no es un directorio le asignamos la propiedad “leaf:true” al nodo que estamos creando y también le asignamos la clase CSS que contendrá al icono correspondiente. En el paso cinco cerramos el directorio que leímos anteriormente. Ahora necesitamos definir la función “getIcon” de la siguiente manera:

function getIcon($name){
	if (preg_match("/\.png$/", $name) || preg_match("/\.jpg$/", $name) || preg_match("/\.gif$/", $name)) {
		return 'jpg-icon';
	}else if (preg_match("/\.xls$/", $name) || preg_match("/\.xlsx$/", $name)) {
		return 'xls-icon';
	}else if (preg_match("/\.ppt$/", $name) || preg_match("/\.pptx$/", $name)) {
		return 'ppt-icon';
	}else if (preg_match("/\.doc$/", $name) || preg_match("/\.docx$/", $name)) {
		return 'doc-icon';
	}else{
		return 'unknow-icon';
	}
}

Esta función recibe el nombre de un archivo y mediante una condición verificamos la terminación o “extensión” para poder asignarle el icono correspondiente, si no encuentra ninguna extensión le asignaremos un icono genérico. En el material de apoyo he creado las clases CSS necesarias, ya hemos hablado de cómo cambiar los íconos a los nodos anteriormente.

.xls-icon{background:transparent url(icons/page_excel.png) 0 0 no-repeat !important;}
.ppt-icon{background:transparent url(icons/page_white_powerpoint.png) 0 0 no-repeat !important;}
.doc-icon{background:transparent url(icons/page_word.png) 0 0 no-repeat !important;}
.jpg-icon{background:transparent url(icons/picture.png) 0 0 no-repeat !important;}
.unknow-icon{background:transparent url(icons/page_white.png) 0 0 no-repeat !important;}

Por último necesitamos generar el JSON con la información que hemos obtenido.

//print the data
echo json_encode($nodes);

Si ejecutas el archivo “get-files.php” en tu navegador debería regresarte la siguiente información:

[{"text":"docs","id":"\/docs"},{"text":"music","id":"\/music"},{"text":"pictures","id":"\/pictures"}]

Recordemos que cuando utilizamos el componente TreePanel lo más importante es la información que éste contiene, hasta ahora solamente hemos creado la parte dinámica del nuestro ejemplo, pasemos a crear la parte visual.

Creación del TreePanel

Hemos estudiado anteriormente como crear un TreePanel, realmente no tiene nada complicado ya que la parte complicada ya la hemos hecho y ahora si estamos listos para escribir el siguiente código dentro del archivo “tree-files.js”:

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

Lo más importante aquí es el identificador que le asigné al nodo “root”, el ID es el parámetro que por defecto el TreePanel envía al servidor cuando se hace una petición Ajax, por lo tanto el primer directorio que necesito que sea desplegado es el principal, por esta razón le asigné un punto ya que la ruta generada en el servidor es la siguiente para este caso:

// root = files/
// node = .
//root+node = files/.
$d = dir($root.$node);

Lo siguiente es renderizar el TreePanel en la pantalla, para esto usaré una ventana de la siguiente manera:

var win = new Ext.Window({		
	title:'Reading files example',
	layout:'fit',
	width:300,
	height:400,
	items: tree
});
win.show();	

Ahora, si damos clic sobre cualquier carpeta automáticamente se realizará una llamada Ajax al servidor y este nos regresará los archivos necesarios.

Conclusiones

Hemos visto como exponer el contenido de una carpeta ubicada en nuestro servidor, utilizar el componente TreePanel es muy sencillo, más adelante veremos como interactuar con este componente, agregaremos algunos eventos y permitiremos que el usuario pueda mover los nodos de un lugar a otro. Estamos contentos de recibir sus comentarios, sugerencias o críticas, recuerda seguirnos en Twitter (@quizzpot) para estar pendiente de las actualizaciones que hacemos, cada vez iremos avanzando en la complejidad de nuestros tutoriales, pero primero necesitamos poner firmes las bases.

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!