Desarrollosweb.net

En ExtJS tenemos básicamente dos tipos de grids, los que únicamente son para listar información (los llamaremos Grids básicos) y los grids editables, que permiten editar la información que se lista dentro de ellos.

Grid básico

En los grids tenemos que distinguir 3 partes importantes:

• El store de datos
• El modelo de datos de las columnas
• La definición del grid en sí

El store de datos, es el objeto que se encarga de almacenar los datos que se van a mostrar en el grid. Básicamete se tratan de arrays de datos, pero su particularidad es que pueden leer los datos desde diversas fuentes:

• Estáticas: ficheros XML o variables de tipo array
• Dinámicas: servicios de datos XML o JSON

En la definición de un store tenemos que tener en cuenta dos aspectos importantes: el formato de los datos, que nos va a indicar qué tipo de reader necesitamos configurar y si el origen de dato es remoto, configurar el proxy de lectura de datos

El modelo de datos de las columnas nos define qué datos se van a mostrar en el grid, con qué formato, y de donde se extraen los datos. Hay que tener en cuenta que aunque en un registro se lean muchos campos, podemos elegir cuales mostrar y cuales no.

Pasos para configurar un grid

Primero definimos el formato de cada registro, aquí configuramos cuantos campos hay y de que tipo

    /*
     * Creamos el registro de datos
     */
    var categoriesRecord = new Ext.data.Record.create([
        {name: 'cad_id', type: 'int'},
        {name: 'cad_name', type: 'string'},
        {name: 'cad_date', type: 'date', dateFormat: 'Y-m-d'},
        {name: 'cad_description', type: 'string'}
    ]);

Después, configuramos el lector de datos. Como se dijo antes, el lector de datos será diferente dependiendo del formato de los datos que obtengamos. En este caso estamos definiendo que los datos nos vendrán codificados en JSON

    /*
     * Creamos el reader de datos
     */
    var categoriesGridReader = new Ext.data.JsonReader({
        root: 'data',
        totalProperty: 'total',
        id: 'cad_id'},
        categoriesRecord
    );

La configuración del reader es fácil de entender:

• Mediante el campo root, indicamos la etiqueta bajo la que llegarán los datos, en este caso ‘data’
• El campo totalProperty nos indica en qué etiqueta nos llega el número total de registros
• El campo id, nos indica en qué campo nos llega la identificación del registro

Una vez tenemos configurado el registro y el reader, definimos el proxy de datos (para una carga remota de los mismos).

    /*
     * Creamos el proxy para lectura remota de datos
     */
    var categoriesDataProxy = new Ext.data.HttpProxy({
        url: 'scripts/categoriesService.php',   // Servicio web
        method: 'POST'                          // Método de envío
    });

En este caso, vemos que la carga la hacemos a través de un script php.El cual nos debe devolver un JSON como el siguiente:

{
    "total":3,
    "data":[
        {
            "cad_id":1,
            "cad_name":"Categoría 1",
            "cad_description":"Descripción de la primera categoría",
            "cad_date": "2008-10-01"
        },{
            "cad_id":2,
            "cad_name":"Categoría 2",
            "cad_description":"Descripción de la segunda categoría",
            "cad_date": "2008-10-11"
        },{
            "cad_id":3,
            "cad_name":"Categoría 3",
            "cad_description":"Descripción de la tercera categoría",
            "cad_date": "2008-10-20"
        },{
            "cad_id":4,
            "cad_name":"Categoría 4",
            "cad_description":"Descripción de la cuarta categoría",
            "cad_date": "2008-10-21"
        },
    ]
}

Para ello, el php de prueba tiene este contenido

$retValue = array(
    'total' => 4,
    'data' => array(
        array(
            'cad_id' => 1,
            'cad_name' => 'Categoría 1',
            'cad_description' => 'Descripción de la primera categoría',
            'cad_date' => '2008-10-01'
        ),
        array(
            'cad_id' => 2,
            'cad_name' => 'Categoría 2',
            'cad_description' => 'Descripción de la segunda categoría',
            'cad_date' => '2008-10-11'
        ),
        array(
            'cad_id' => 3,
            'cad_name' => 'Categoría 3',
            'cad_description' => 'Descripción de la tercera categoría',
            'cad_date' => '2008-10-20'
        ),
        array(
            'cad_id' => 4,
            'cad_name' => 'Categoría 4',
            'cad_description' => 'Descripción de la cuarta categoría',
            'cad_date' => '2008-10-21'
        )
    )
);
echo json_encode($retValue);

En el caso de scripts php, primero hay que crear en un array la estructura que queramos devolver y después codificar mediante al función json_encode (PHP5), o bien (en PHP4) utilizar la librería de codificación JSON que provee PEAR

Hay que tener en cuenta una cosa JSON, trabaja únicamente en UTF-8, por lo que si los datos los extraemos por ejemplo de una base de datos configurada en ISO-8859-1, HAY QUE CONVERTIRLOS A UTF-8, obligatoriamente.

Ahora ya tenemos todos los elementos necesarios para configurar el store del grid:

    /*
     * Creamos el datastore donde se van a almacenar los datos de la tabla
     */
    var categoriesDataStore = new Ext.data.Store({
        id: 'categoriesDS',
        //Indicamos de donde se va a leer los datos, en este caso un servicio web
        proxy: categoriesDataProxy,
        // Parámetros base que se enviarán al script
        baseParams: {
            language: "es_ES"
        },
        // Indicamos el reader, es decir el procesador de los datos
        reader: categoriesGridReader
    });

Ya por último, antes de definir el grid en sí, definimos cuales van a ser nuestras columnas, su tipo, ancho, etc.

    var categoriesColumnMode = new Ext.grid.ColumnModel(
        [{
            header: '#',
            dataIndex: 'cad_id',
            width: 50,
            hidden: false
        },{
            header: 'Categoría',
            dataIndex: 'cad_name',
            width: 150
        },{
            header: 'Descripción',
            dataIndex: 'cad_description',
            width: 300
        },{
            header: 'Fecha',
            dataIndex: 'cad_date',
            width: 90,
            renderer: Ext.util.Format.dateRenderer('d/m/Y')
        }]
    );

Ahora ya tenemos todos los elementos necesarios para configurar el grid:

    var categoriesGrid = new Ext.grid.GridPanel({
        id: 'cat_categoriesGrid',
        store: categoriesDataStore,
        cm: categoriesColumnMode,
        enableColLock:false,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

Sólo nos falta poner todo dentro de un bloque Ext.onReady y definir una ventana para poder visualizar el grid.

Grid editable

Además de los grids básicos, ExtJS permite definir grids en los que se puedan editar valores. Para convertir un grid no editable a uno editable, tenemos que hacer cambios en dos lugares: en el ColumnModel y en la definición del grid En el Column mode, hay que incluir una etiqueta ‘editor’ en aquellas columnas que queramos hacer editables. En esta etiqueta los que se pone es la definición de un campo editable cuyo objeto puede ser cualquiera de los que hay disponibles para los formularios (cajas de texto, combos, fechas, tiempo…)

    var categoriesColumnMode = new Ext.grid.ColumnModel(
        [{
            header: '#',
            dataIndex: 'cad_id',
            width: 50,
            hidden: false
        },{
            header: 'Categoría',
            dataIndex: 'cad_name',
            width: 150,
            editor: new Ext.form.TextField({})

        },{
            header: 'Descripción',
            dataIndex: 'cad_description',
            width: 300,
            editor: new Ext.form.TextField({})
        },{
            header: 'Fecha',
            dataIndex: 'cad_date',
            width: 90,
            renderer: Ext.util.Format.dateRenderer('d/m/Y'),
            editor: new Ext.form.DateField({})
        }]
    );

La modificación del grid es “más fácil”. En este caso sólo hay que heredar de otra clase distinta: EditorGridPanel

    var categoriesGrid = new Ext.grid.EditorGridPanel({
        id: 'cat_categoriesGrid',
        store: categoriesDataStore,
        cm: categoriesColumnMode,
        enableColLock:false,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

Al ejecutar el ejemplo, podemos ver que al hacer doble click en cualquiera de los campos editables, se nos permite cambiar el valor del campo y que dicho cambio queda marcado en la esquina superior izquierda con un pequeño icono rojo

Tratando los cambios en un grid editable

De nada nos sirve tener un grid editable si no tratamos los datos, pues todos los cambios que se hagan en un grid editable son cambios en el store local.

ExtJS no ofrece ningún mecanismo para automatizar el guardado de datos, dejando a elección del programador la elección del método. Por ejemplo, podemos hacer actualizaciones campo a campo, capturando el evento de cambio de una celda, o bien podemos enviar todos los cambios de una vez mediante la acción en algún botón o componente

Qué método utilizar queda a elección del desarrollador según las circunstancias en las que se encuentre. En este caso vamos a explicar cómo se haría un envío de todos los cambios. Para ello vamos a coger el ejemplo anterior y primeramente añadir un botón de actualización de cambio situado en una barra de herramientas superior

    var categoriesGridTopbar = new Ext.Toolbar({
        id: 'categoriesGridTopbarId',
        items: [
            '->',
            {
                xtype:'button',
                text:'Guardar Cambios',
                id: 'portadas_ToolbarTop_btn0',
                handler:categoriesGridTopbarHnd,
                type:'button'
            }
        ]
    });

Como se puede ver, se a asignado un handler al botón, que será el que tenderá la petición de guardado de cambios y que contendrá toda la lógica de actualización

En el handler, lo que hemos hecho es crear una llamada Ajax que envíe al servidor todos los cambios, para ello se pide al store un array con todos los registros que han cambiado, se recorre y se almacena en un array los datos necesarios para enviar. Este array se codifica en JSON y se envía como una variable POST normal. Después es tarea del script php (o Java, o lo que sea) de tratar el array de cambios y realizar las actualizaciones pertinentes.

    var failureAjaxFn = function(response, request) {
        Ext.Msg.show({
            title: 'Error',
            msg: 'Cambios no guardados. Status:' + response.status,
            buttons: Ext.Msg.OK,
            animEl: 'elId',
            icon: Ext.MessageBox.ERROR
        });
    }

    var successAjaxFn = function(response, request) {
        /*
         * En response.responseText tenemos la respuesta del script, en este caso
         * la salida del script PHP es JSON con lo que tenemos que decodificarlo
         */
        var jsonData = Ext.util.JSON.decode(response.responseText);

        if (true == jsonData.success) {
            Ext.Msg.show({
                title: 'Operación completada',
                msg: jsonData.message,
                buttons: Ext.Msg.OK,
                animEl: 'elId',
                icon: Ext.MessageBox.INFO
            });

            /*
             * PASO IMPORTANTE
             * Para indicar al store que los cambios se han realizado correctamente
             * y eliminar los indicadores de que hay cambios pendientes de guardar
             * hay que llamar
             */
            categoriesDataStore.commitChanges();

        } else {
            Ext.Msg.show({
                title: 'Error',
                msg: jsonData.message,
                buttons: Ext.Msg.OK,
                animEl: 'elId',
                icon: Ext.MessageBox.ERROR
            });
        }
    }
var categoriesGridTopbarHnd = function (e,o) {
    	/*
    	 * Pedimos al store que nos devuelva los registros modificados
    	 */
        var modifiedRecords = categoriesDataStore.getModifiedRecords()

        if (modifiedRecords.length > 0) {
        	/*
             * Creamos un array con los datos de los registros que han cambiado
             */
        	var changes = new Array();
            for (var i=0; i < modifiedRecords.length; i++){
                changes.push(modifiedRecords[i].data);
            }

            /*
             * Codificamos los cambios en JSON
             */
            changes = Ext.util.JSON.encode(changes);

            Ext.Ajax.request({
                url: 'salvarDatos.php',
                method: 'POST',
                success: successAjaxFn,
                failure: failureAjaxFn,
                timeout: 30000,
                params: {
                    operation: 'update',
                    changes: changes
                }
            });
        }
    }

Grids paginados

Uno de las barras de herramientas más utilizadas con los grids es la de paginación. Su utilización es
bastante sencilla. Primero creamos la barra de paginación:

    var categoriesPagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: categoriesDataStore,
        displayInfo: true
    });

Su uso es sencillo, sólo tenemos que indicar cual es el store, y el tamaño de página. Después de definirlo
se lo asociamos al grid, para lo que sólo tenemos que indicar en la configuración
lo siguiente “bbar: categoriesPagingBar”:

    var categoriesGrid = new Ext.grid.EditorGridPanel({
        id: 'cat_categoriesGrid',
        store: categoriesDataStore,
        cm: categoriesColumnMode,
        enableColLock:false,
        tbar: categoriesGridTopbar,
        bbar: categoriesPagingBar,
        selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
    });

Después en la carga inicial de datos, indicamos que queremos cargar la primera página de resultados
y el número de ellos

categoriesDataStore.load({params: {start: 0, limit: 10}});

Y después de esto ya no nos tenemos que preocupar de nada más, pues cada vez que hagamos click en los botones el store nos enviará dos variables nuevas: start y limit, al estilo de las paginaciones clásicas

Etiquetas: desarrollo web, Ext.EditorGridPanel, Ext.GridPanel, extjs, javascript