Aprendiendo Ext JS 3

Explorador de archivos para el servidor Más videos

Descripción del tema

En esta ocasión veremos como desplegar los archivos que tenemos en el servidor en un TreePanel, luego mediante un panel desplegaremos el contenido del archivo cuando el usuario de click sobre este. 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.
Explorador de archivos para el servidor

Demostración del tutorial

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:
Explorador de archivos para el servidor

Utilizamos el código del tutorial anterior

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.
Explorador de archivos para el servidor

Layout border con dos regiones

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:
Explorador de archivos para el servidor

Redimencionar el TreePanel

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

Ocultar el TreePanel

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.
Explorador de archivos para el servidor

Mostrar el contenido de los archivos

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.
Explorador de archivos para el servidor

Mostrar los archivos seleccionados

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.

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!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

20Comentarios

  • Avatar-3 Manolo 01/12/2009

    Poco apoco nos vamos acercando a lo mero bueno sigue así Crys

    • Avatar-10 Manolo 02/12/2009

      var el = Ext.get(Ext.DomQuery.select('.x-panel-body',main.el.dom)[0]); Que hace esto exactamente?

      • Avatar-4 Crysfel 02/12/2009

        Ext.DomQuery.select('.x-panel-body',main.el.dom)[0] Busca los elementos que contengan la clase '.x-panel-body' tomando como root el elemento 'main.el.dom', luego toma el primer elemento del arreglo que regrese, en este caso la busqueda siempre regresará un elemento solamente ya que la ventana tiene un solo panel. var el = Ext.get(...) Toma el elemento encontrado y lo convierte en un Ext.Element

        • Avatar-4 Manolo 02/12/2009

          Muchas Gracias por la explicación Crys

          • Avatar-12 narutokeen 07/12/2009

            Muy bien el ejemplo sigue asi por.

            • Avatar-8 ilen 09/12/2009

              Hola muy bueno el post, disculpa si vamos hacer aplicaciones con php + jsExt

              • Avatar-11 Manolo 10/12/2009

                Ayer esta probando unas cosas, regresar html con ajax, todo mis links funcionan con un evento que les asigno, pero los que regresa ajax no tienen ese evento :S y otra duda como agregar filas a un grid, desde ya gracias un saludo desde colombia

                • Avatar-1 Imfael 10/12/2009

                  Manolo puedes usar Delegación de Eventos para tu problema o un callback, todo depende de como este tú código.

                  • Avatar-9 Crysfel 10/12/2009

                    tendrías que agregar los eventos a los nuevos elementos mediante un callback.

                    • Avatar-11 Manolo 10/12/2009

                      Con el callback funciona muy bien, Gracias Crys e Imfael pero como es eso de la delegación en Ext :S?

                      • Avatar-9 ilen 21/01/2010

                        Crys solo me funciona en local, en mi servidor no me funciona, que puedeser?? en los archivos get-files.php y tree-files.js ya le cambie la ruta y je deje en '/' para ver los archivos que tengo en el hosting pero se queda en el root no muestra mas... porque sera? de ante mano gracias

                        • Avatar-11 Pablo 05/02/2010

                          Hola Crysfel! ¿Cómo tendría que hacer si en lugar de usar layout quisiera renerizar el treepanel en un TabPanel? o en su defecto ¿Cómo asigno el Layout a un tabPanel, para que me lo muestre sólo cuando cliqueo la pestaña correspondiente? Muchas gracias! Excelente tutorial!

                          • Avatar-6 Ronhead 16/04/2010

                            Amigo, sabes que el ejemplo hace que se cuelge mozilla, esto ocurre cuando selecciono un archivo pdf y luego el html sabes por que podria psar esto? ---- MUchas gracias por los tutoriales siempre me sirven de ayuda sigue asi, y que siga creciendo esta comunidad

                            • Avatar-7 Embrujo 31/05/2010

                              Excelente tutorial, además si sigues los pasos con tiempo y tranquilamente se aprende para luego poder personalizar y hacer cosas parecidas.

                              • Avatar-2 Lgroup 28/06/2010

                                Hola Crysfel!!Como seria en caso de que el contenido de cada opción del menu se abra en diferentes pestañas? Excelente tutorial, muchas gracias!!

                                • Avatar-5 Vandor 04/10/2010

                                  Muchsisimas gracias por el material y por tu tiempo... Estoy desarrollando un aplicativo en donde tengo un border Layout y en la region center quiero insertar este aplicactivo pero se me presenta q cuando inicio a explorar el arbol al momento de cargar aparecen los iconos de carpetas y archivos pero una vez terminada (cargada menos de 1 seg) este es reemplazado por un icono no conocido y me parece q es "unknow-icon", en la raiz aparece dos (el signo mas y el simbolo de carpeta) de este icono, a un segundo nivel se presentan 3 iconos la sgte carpeta, y a un tercer nivel se presentan 4 iconos he seguido todos los pasos y no encuentro porq sucede esto... . Ejm.[i]= icono [i][i]User files [i][i][i]docs [i][i][i][i]ebook.pdf de antemano agradesco cualquier ayuda es importante para mi gracias

                                  • Avatar-2 omar 18/10/2010

                                    Hola muy buen sitio, y la dedicacion que hay en el mismo..... Estoy iniciandome en este mundo extjs. y tengo que realizar como primera medida lo siguiente..... un Panel con menu, desplegable , cuando hago click necesito que me muestre la info en un iframe, El tema es que no uso codeigniter.... tambien..... y no quiero leer el menu desde una carpeta...... me entienden..... gracias

                                    • Avatar-6 César Mendez 20/03/2011

                                      Crys me sale el siguiente mensaje en las herramientas de desarrolladores de Google Chrome ebook.pdfGET http://quizzpot.com/demos/extjs/tree/files/docs/ebook.pdf 200 (OK) ebook.pdf:-1Resource interpreted as Document but transferred with MIME type application/pdf. una consulta y si digamos si en un archivo de texto io quiero modificarlo?

                                      • Avatar-6 polo 03/12/2012

                                        Muchas gracias por tu ejemplo, pero como puedo visualizar lols archivos de word o excel en el mismo panel

                                        • Avatar-2 William Garcia 13/07/2013

                                          Hola buen trabajo, tengo una pregunta quisiera que el Explorador de archivos, no se carge automaticamente en el html sino que abra desde un boton en la misma pagina, Porfavor Alguna Sujerencia, Gracias

                                          Instructor del curso

                                          Crysfel3

                                          Autor: Crysfel Villa

                                          Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                          Descarga Código Fuente Ver Demostración

                                          Regístrate a este curso

                                          Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                          Tendrás acceso a descargar los videos, códigos y material adicional.

                                          Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                          Llevarás un registro de tu avance.