Blog

Descripción

Podemos utilizar este componente para mostrarle al usuario los archivos que tiene en su FTP, o bien para que seleccione alguna imagen que esté alojada en el servidor para ser mostrada en algún lugar, tenemos cientos de posibles escenarios donde podemos utilizar este componente.

Propiedades de configuración

url (string): define la url donde se realizarán las peticiones utilizando Ajax para obtener los directorios que el componente mostrará, esta propiedad es obligatoria.

multiSelect (boolean): “true” si el componente permitirá seleccionar varios archivos al mismo tiempo, por defecto es “false”.

filters (string): parámetro que se envía al servidor para filtrar el tipo de archivos a mostrar, los formatos deben ir separado por espacios en caso de ser mas de uno, por ejemplo “html htm jpg”.

root (string): este parámetro especifica el directorio que mostrará el componente al abrirse por primera vez, es importante mencionar que el servidor es el responsable de implementar esta funcionalidad al enviar los archivos para el directorio asignado. Por defecto es “/”.

params (object): parámetros que serán enviados en cada petición al servidor, estos parámetros variarán según tu propia aplicación.

Puedes aplicar cualquier configuración del componente “Ext.Window”, por ejemplo “title, width, height, etc.”

Métodos

show(): este método muestra el componente en pantalla.

Puedes invocar todos los métodos del componente “Ext.Window”.

Eventos

selectfile (Array files): es disparado cuando el usuario ha seleccionado uno o varios archivos, el arreglo que recibe como parámetro contiene objetos de tipo “Ext.data.Record” con la información de los archivos.

Puedes aplicar todos los eventos que el componente “Ext.Window” ofrece.

Parámetros enviados al servidor

Los parámetros siguientes son enviados al servidor mediante el método “POST”.

isForMainPanel (boolean): este parámetro es enviado al servidor cuando la petición ha sido realizada desde el panel central, es útil para diferenciar entre las peticiones del árbol y del panel central.

path (string): es el directorio que el usuario ha seleccionado para ser mostrado, en el servidor se debe tomar y regresar los archivos que se encuentran en ese directorio.

filters (string): en este parámetro se envían los formatos de los archivos que se quieren filtrar, el servidor es el responsable de aplicar el filtro de archivos y regresar los solicitados

Respuesta del servidor

El servidor debe regresar la información en formato JSON.

Para el árbol de carpetas en la parte izquierda, la estructura del JSON debe ser de la siguiente manera.

[{"id":"1","text":"Nombre a mostrar","url":"\/url\/del\/archivo","isFolder":true,"children":[]}]

En caso de tener carpetas internas, en el arreglo “children” deben ir definidas, esta es la estructura propuesta por el componente “Ext.tree.TreePanel” por lo tanto debes estar familiarizado, las propiedades adicionales son “url” la cual es la ruta del archivo en el servidor y la propiedad “isFolder” la cual es booleana, esta propiedad sirve para que al dar click sobre las carpetas, estas se abran.

La estructura es prácticamente la misma para el panel central, sólo se le agrega la propiedad “iconCls” que es una clase CSS con el icono que se desea mostrar.

{
files: [{...},{...}] //la estructura anterior
}

Es obligatorio que para el panel central la información regresada por el servidor sea un objeto JSON con la propiedad “files”.

Forma de uso

Primero debemos importar al HTML las hojas de estilo y el componente de JavaScript de la siguiente manera:

<link rel="stylesheet" type="text/css" href="Ext.ux.FileManager/Ext.ux.FileManager.css" />
<script type="text/javascript" src="Ext.ux.FileManager/Ext.ux.FileManager.js"></script>

Hay que recordar que obviamente primero tenemos que incluir la librería de Ext JS.

Lo siguiente es crear una instancia del componente “FileManager” de la siguiente manera:

var manager = new Ext.ux.FileManager({
	url: 'getFiles.php'
}); 

manager.show();

Para tomar los archivos que han sido seleccionados por el usuario tienes que agregar un “listener” al evento “selectfile”, de la siguiente manera:

manager.on('selectfile',function(files){
	console.debug(files);
});

También puedes realizarlo en la configuración del constructor de la siguiente manera:

var manager = new Ext.ux.FileManager({
	url: 'getFiles',
	listeners:{
		selectfile: function(files){
			console.debug(files);
		}
	}
});

Para poder seleccionar varios archivos al mismo tiempo:

var manager = new Ext.ux.FileManager({
	url: 'getFiles.php',
	multiSelect:true
});

Implementación del servidor

La implementación en el lado del servidor debe ser realizada dependiendo las necesidades de tu proyecto y en el lenguaje que se requiera, solo debes tener en cuenta las especificaciones anteriormente mencionadas.