Tablas con ExtJS (I)

He estado trabajando con la libreria javascript ExtJS y, aunque la documentación en web es bastante árida si no dominas el lenguaje, existe un libro que es de gran ayuda para empezar.

Puedes ver el libro aquí. También tienen un foro muy útil, que se puede leer aquí.

El libro es muy útil, pero algunos ejemplos son incorrectos y muchos de ellos son sólo fragmentos difíciles de completar la primera vez.

Para empezar hay que descargase las librerías de su página web, aquí.

Los archivos necesarios dependerán de lo que se quiera hacer, para trabajar con las tablas (grids) se debe incluir las siguientes librerías y css:

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/lib/extjs/resources/css/ext-all.css" />

<script src="${pageContext.request.contextPath}/lib/extjs/adapter/ext/ext-base.js"></script>
<script src="${pageContext.request.contextPath}/lib/extjs/ext-all-debug.js"></script>

La manera más sencilla de trabajar al principio es usando un archivo HTML para intentar familiarizarse con los errores y problemas que irán surgiendo. También es mucho más sencillo empezar incorporando el código javascript en la misma página, para cuando se tenga algo funcionando estructurarlo adecuadamente.

Podemos empezar realizando el “Hola Mundo” para ver si vamos por el buen camino:

<script>
     Ext.onReady(function(){
         Ext.Msg.alert('Hello', 'World');
     });
</script>

Los problemas que puedan surgir en este momento se deben a que los archivos necesarios no se han encontrado en la ruta especificada.

Para crear una tabla se debe especificar un conjunto de datos, que ExtJS denomina store. Los objetos Store pueden ser de varios tipos, siendo lo más sencillos arrays de datos, pero es posible que obtengan los datos mediante JSON ó XML configurando un lector de datos adecuado (reader).

<script>
    Ext.onReady(function(){
        var storePasajeros = new Ext.data.Store({
        url: 'maintenance.do?reqCode=loadPasajeros/>',
        reader: new Ext.data.JsonReader({
        root:'pasajeros',
        id:'id'
        }, [
         'id',
         'nombre',
         'movil',
         'notas',
         'grupo'
        ])
    });

    storePasajeros.load();

});

</script>

El parámetro ‘url’ debe especificar una dirección en el servidor que devuelva un texto con formato JSON, que debe contener el elemento raíz definido como ‘root’ en el reader.  El texto JSON tendría que ser, en este caso, como sigue:

{
    "pasajeros":[
        {"grupo":"","id":15,"movil":"","nombre":"Luisa Gomez","notas":""},
        {"grupo":"","id":14,"movil":"","nombre":"Pedro Jimenez","notas":""}
    ]
}

Existen tablas de sólo lectura, y tablas editables. En mi caso utilizo tablas editables, pero ambas funcionan básicamente igual. Una tabla se define de la siguiente forma:

var nombre_edit = new Ext.form.TextField();
var movil_edit = new Ext.form.TextField();
var grupo_edit = new Ext.form.TextField();
var notas_edit = new Ext.form.TextField();

var gridPasajeros = new Ext.grid.EditorGridPanel({
    renderTo: 'divPasajeros',
    frame:true,
    title: 'Pasajeros',
    height:200,
    width:600,
    clickstoEdit: 1,
    store: storePasajeros,
    listeners: {
        afteredit: function(e){
            e.record.commit();
        }
    },
    columns: [
        {header: "Nº", dataIndex: 'id', width: 25, hidden: true},
        {header: "Nombre", dataIndex: 'nombre', width: 200, editor: nombre_edit},
        {header: "Movil", dataIndex: 'movil', width: 75, editor: movil_edit},
        {header: "Grupo", dataIndex: 'grupo', width: 75, editor: grupo_edit},
        {header: "Notas", dataIndex: 'notas', width: 225, editor: notas_edit}
    ],
});

El objeto de tipo EditorGridPanel es la tabla editable, las variables TextField son los editores para cada columna. Se define dónde se va a mostrar con el parámetro renderTo, su apariencia y el origen de datos en el parámetro store.

El ejemplo completo se puede descargar aquí. El resultado es el siguiente:

Las tablas ExtJS proveen una serie de funcionalidades de serie, tal como ordenar los registros y mostrar/ocultar columnas.

Se puede añadir botones, paginación,  controlar eventos y otras funcionalidades.