js

Y lo que me ha costado. Ya me habí­an avisado que utilizar ExtJS era jodido, sobre todo al principio. Alguna vez habí­a que ponerse…

En resumen, lo que tení­a que hacer un grid selector de los ficheros de un directorio, para una vez seleccionado actualizar un registro de una tabla de una base de datos.

Lo primero era, como no, incluir en el html (en mi caso, en una plantilla de smarty .tpl), los enlaces a los ficheros css y js de extjs, además del enlace al script ficheros_server.js, éste de creación propia, que utilizaremos para mostrar el grid selector de ficheros.

link rel="stylesheet" type="text/css" href="{$includes_dir}js/ext-2.0.2/resources/css/ext-all.css" /> 
script type="text/javascript" src="{$includes_dir}js/ext-2.0.2/adapter/ext/ext-base.js">
script type="text/javascript" src="{$includes_dir}js/ext-2.0.2/ext-all.js">
script type="text/javascript" src="{$includes_dir}js/ficheros_server.js">

Lo segundo a modificar es el archivo .php que llama a la plantilla, y al cual añadiremos un caso para que devuelva el listado de ficheros de un directorio, tal que así­:

case 'listado_ficheros_json':
	$ficheros=json_encode($objFichero->ListadoFicherosServer($ruta));
	echo'({"results":'.$ficheros.'})';
	exit();
	break;

Lo íºnico que hemos hecho es llamar al método ListadoFicherosServer, con la ruta que queramos, y devolver, y esto es lo importante, el array codificado con json de resultados, con la forma {“results”: [array_ficheros]}. Es importante la sintaxis de esta lí­nea, ya que es la que va a tratar ficheros_server.js para obtener el listado de ficheros.

El método ListadoFicherosServer incluye lo siguiente:

function ListadoFicherosServer($directorio) {
	$dir_item='';
	$archivos=array();
		
	$dir=opendir($directorio);
	$i=0;
	while($dir_item=readdir($dir)) {
		if(is_file($directorio."/".$dir_item)) {
     $archivos[]=array("nombre"=>$dir_item,"tamanyo"=>filesize($directorio."/".$dir_item),"fecha"=>date("Y-m-d H:i:s", filemtime($directorio."/".$dir_item)));
	        }
	        $i++;
        }
	return $archivos;
}

Como véis, en el array de archivos devuelvo tres campos: el nombre, el tamaño y la fecha.

Ahora viene el tema, el ficheros_server.js :D Lo pongo y lo explicamos:

Ext.onReady(function() {

	var myRecordObj = Ext.data.Record.create([
            {name: 'nombre', sortDir: 'ASC'},
            {name: 'tamanyo', type: 'float'}, 
            {name: 'fecha', type: 'date', dateFormat: 'Y-m-d H:i:s'}
         ]);
 
	var myReader = new Ext.data.JsonReader({
		root: 'results',
		id: 'nombre'},
		myRecordObj
	);
	
	var myDataStore = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
                url: 'comun_ficheros.php', 
                method: 'POST'
            }),   
            baseParams:{a: "listado_ficheros_json"},
            reader: myReader,
            sortInfo:{field: 'nombre', direction: "ASC"}
        });
 	
 	myDataStore.load();
 	
	var grid = new Ext.grid.GridPanel({
		store: myDataStore,
		columns: [
			{header: 'Archivo', width: 120, sortable: true, dataIndex: 'nombre'},
			{header: 'Tamaño', width: 90, sortable: true, dataIndex: 'tamanyo'},
			{header: 'Fecha', width: 120, sortable: true, 
				renderer: Ext.util.Format.dateRenderer('m/d/Y'), 
	                        dataIndex: 'fecha'}
		],
		viewConfig: {
			forceFit: true
		},
		renderTo: 'ficheros_server',
		title: 'Listado de archivos en el servidor',
		width: 350,
		frame: true,
		border: true
	});
 
 	grid.on('rowclick', function(grid){
		var record=grid.getSelectionModel().getSelected();
		Ext.get('fichero').dom.value=record.get('nombre');});	
});

Lo primero que hacemos en el .js es crear un objeto Record, con tres campos (los mismos que vamos a devolver en el array): el nombre, el tamaño y la fecha. Tras esto, creamos un objetos Lector de json, para leer la cadena que devuelve el .php anterior, indicando que el root va a ser “results” (lo que devolví­amos en el php al principio), que el campo identificador va a ser el nombre, y que lo que lea, lo guarde en el objeto Record que hemos creado anteriormente.

Una vez tenemos el lector y el objeto Record, creamos el almacén de datos. Lo primero que definimos es de donde obtenemos los datos, en este caso a través de una llamada al fichero php donde hemos añadido el caso para devolver el array de ficheros. Con baseParam pasamos las opciones que queramos, en este caso a=listado_ficheros_json, que será el caso del php. Por íºltimo, indicamos que lector vamos a utilizar y la ordenación de los datos. Una vez creado el objeto, lo cargamos con los datos mediante el método .load().

Ya tenemos todos los ficheros en el almacén de datos, sólo nos falta dibujar el grid selector con esos datos dentro. Esto es lo más sencillo: creamos un objeto GridPanel, indicando, primero, que los datos están en el almacén de datos recién cargado; segundo, las columnas del grid panel, y tercero diferentes opciones de visualición, entre ellas, y quizás la más importante, renderTo, que será el id del div donde queremos dibujar el grid.

Finalmente, añadimos un evento al grid, el “rowclick”, que lo íºnico que hace es cambiar el valor de un campo del html con el nombre del fichero que hayamos pinchado en el grid.

Visto así­ parece fácil, pero hasta dar con todas las cosillas, ufff.

Seguiré contando mis aventuras con ExtJS… ;)