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.

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… ;)

Llevo varias semanas intentando ponerme y nunca lo hago. Por un lado, quiero aprender “bien”, de una vez, JavaScript y, de paso, echarle un ojo tanto a ExtJS (las malas compañías…) como a famosas librerías JS tipo jQuery o Prototype.

De paso, quiero meterme a fondo con algún framework PHP, seguramente Symfony, aunque no descarto CakePHP o Zend Framework (¿alguna sugerencia para inclinarme por uno de ellos?).

Y para practicar un poco de todo esto, llevarlo a la práctica mediante el desarrollo de una aplicación web para la gestión de aulas-alumnos-clases tipo Siestta.

Ya veremos en qué queda todo, si en sólo buenas intenciones o en algo más… :D