Tablas con ExtJS (II)

Continuando con el tema de las tablas ExtJS, voy a mostrar cómo he añadido funcionalidad a las tablas añadiendo botones y controlando eventos.

Podéis consultar aquí el capítulo anterior con las explicaciones básicas de cómo montar una tabla con ExtJS. Había conseguido montar una tabla que obtenía datos desde una URL JSON tal como esta:

Los campos son editables porque hemos vinculado unos editores con cada columna. Además necesitamos poder guardar estos cambios para que sea útil. Esto se consigue enviando los datos contenidos en el store al servidor, para ello se puede configurar un botón que hará una llamada al servidor pasando como parámetro los datos del store en formato JSON:

tbar:{
   text: 'Guardar cambios',
   icon: '/reservas/images/drop-yes.gif',
   cls: 'x-btn-text-icon',
   handler: function() {
       var    dialog = new Ext.Window({
           width: 300,
           height: 150,
           minWidth: 200,
           minHeight: 100,
           minimizable: true,
           title: '',
           html: 'Guardando...'
    });

    dialog.show();
    // obtenemos los datos del store para poder convertirlos a JSON
    var cambios = new Array();
    for(var i = 0; i < gridPasajeros.store.getCount(); i = i +1) {
        cambios.push(gridPasajeros.store.data.get(i).data);
    }

    var con = new Ext.data.Connection();
        con.request({
        url: 'maintenance.do?reqCode=savePasajeros', // where to post to..
        params: {'pasajeros': Ext.util.JSON.encode(cambios)},
        method: 'POST',
        callback: function(opts, success, response)  {
            dialog.hide();
            if (!success || ("OK" != response.responseText)) {
                Ext.MessageBox.alert("Error", success ?
                    response.responseText  :
                    "Error saving data - try again");
                    return;
            }
        }
       });
    }
}

Con este código conseguimos que aparezca un botón en la parte superior de la tabla, que al pulsarlo llama a extraer los datos del store a un Array y convertirlos a una cadena de texto JSON, que es enviada en la petición (request) a la url especificada como parámetro y espera una respuesta, que en caso de ser diferente al texto “OK” mostrará un mensaje de error al usuario.

El resultado en pantalla es parecido al siguiente, sólo mostrando elbotón “Guardar cambios”:

El resto de botones se implementan de forma similar, cambiando la operación realizada en el handler del evento:

tbar: [
	{
	text: 'Añadir pasajero',
	icon: '/reservas/images/drop-add.gif',
	cls: 'x-btn-text-icon',
	handler: function() {
		gridPasajeros.getStore().insert(
			0,
			new pasajero_model({
					nombre: '',
   					movil: '',
   					notas: '',
   					grupo : ''
					})
		);
		gridPasajeros.startEditing(0, 0);
	}
},
{
        text: 'Eliminar pasajero',
	icon: '/reservas/images/drop-no.gif',
	cls: 'x-btn-text-icon',
	handler: function() {
		var sm = gridPasajeros.getSelectionModel();
		var sel = sm.getSelected();
		if (sm.hasSelection()){
			Ext.Msg.show({
				title: 'Eliminar pasajero',
				buttons: Ext.MessageBox.YESNOCANCEL,
				msg: '¿Eliminar a '+ sel.data.nombre+'?',
				fn: function(btn){
					if (btn == 'yes'){
						if(gridPasajeros.store.data.length == 1) {
							Ext.MessageBox.alert("Error", "No puede eliminar el último pasajero");
							return;
						}
					        var conex = new Ext.data.Connection();
						conex.request({
						    url: 'maintenance.do?reqCode=deletePasajero', // where to post to..
					            params: {'pasajeroId': sel.id, 'servicioId' : }, // << key value object with data to send
						    method: 'POST',
						    callback: function(opts, success, response)  {
						          if (!success || ("OK" != response.responseText)) {
							            Ext.MessageBox.alert("Error", success ?
							    	    response.responseText  :
								    "Error saving data - try again");
								     return;
							    }
							    gridPasajeros.getStore().remove(sel);
							    // code to update stuff that's affected by the saved form working..
							    // goes here...
						    }
					});
				}
			}
		});
	};
}
}]

El uso de ExtJS me ha parecido cómodo, aunque creo que iniciarse en este tipo de librerias es bastante complicado por la falta de ejemplos básicos. Así mismo  las herramientas opensource que he utilizado para el desarrollo Javascript (Eclipse y Firebug) dejan bastante que desear. Especialmente Eclipse no sabe trabajar con archivos JSP que contengan diferentes tipos de lenguajes (HTML + taglibs + javascript).