Introducción a los Grids en ExtJS

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

  1. /*
  2.  * Creamos el registro de datos
  3.  */
  4. var categoriesRecord = new Ext.data.Record.create([
  5.     {name: ‘cad_id’, type: ‘int’},
  6.     {name: ‘cad_name’, type: ‘string’},
  7.     {name: ‘cad_date’, type: ‘date’, dateFormat: ‘Y-m-d’},
  8.     {name: ‘cad_description’, type: ‘string’}
  9. ]);
  1. /*
  2.  * Creamos el registro de datos
  3.  */
  4. var categoriesRecord = new Ext.data.Record.create([
  5.     {name: ‘cad_id’, type: ‘int’},
  6.     {name: ‘cad_name’, type: ‘string’},
  7.     {name: ‘cad_date’, type: ‘date’, dateFormat: ‘Y-m-d’},
  8.     {name: ‘cad_description’, type: ‘string’}
  9. ]);

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

  1. /*
  2.  * Creamos el reader de datos
  3.  */
  4. var categoriesGridReader = new Ext.data.JsonReader({
  5.     root: ‘data’,
  6.     totalProperty: ‘total’,
  7.     id: ‘cad_id’},
  8.     categoriesRecord
  9. );
  1. /*
  2.  * Creamos el reader de datos
  3.  */
  4. var categoriesGridReader = new Ext.data.JsonReader({
  5.     root: ‘data’,
  6.     totalProperty: ‘total’,
  7.     id: ‘cad_id’},
  8.     categoriesRecord
  9. );

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).

  1. /*
  2.  * Creamos el proxy para lectura remota de datos
  3.  */
  4. var categoriesDataProxy = new Ext.data.HttpProxy({
  5.     url: ‘scripts/categoriesService.php’,   // Servicio web
  6.     method: ‘POST’                          // Método de envío
  7. });

 

  1. /*
  2.  * Creamos el proxy para lectura remota de datos
  3.  */
  4. var categoriesDataProxy = new Ext.data.HttpProxy({
  5.     url: ‘scripts/categoriesService.php’,   // Servicio web
  6.     method: ‘POST’                          // Método de envío
  7. });

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:

  1. {
  2.     “total”:3,
  3.     “data”:[
  4.         {
  5.             “cad_id”:1,
  6.             “cad_name”:”Categoría 1″,
  7.             “cad_description”:”Descripción de la primera categoría”,
  8.             “cad_date”: “2008-10-01”
  9.         },{
  10.             “cad_id”:2,
  11.             “cad_name”:”Categoría 2″,
  12.             “cad_description”:”Descripción de la segunda categoría”,
  13.             “cad_date”: “2008-10-11”
  14.         },{
  15.             “cad_id”:3,
  16.             “cad_name”:”Categoría 3″,
  17.             “cad_description”:”Descripción de la tercera categoría”,
  18.             “cad_date”: “2008-10-20”
  19.         },{
  20.             “cad_id”:4,
  21.             “cad_name”:”Categoría 4″,
  22.             “cad_description”:”Descripción de la cuarta categoría”,
  23.             “cad_date”: “2008-10-21”
  24.         },
  25.     ]
  26. }
  1. {
  2.     “total”:3,
  3.     “data”:[
  4.         {
  5.             “cad_id”:1,
  6.             “cad_name”:”Categoría 1″,
  7.             “cad_description”:”Descripción de la primera categoría”,
  8.             “cad_date”: “2008-10-01”
  9.         },{
  10.             “cad_id”:2,
  11.             “cad_name”:”Categoría 2″,
  12.             “cad_description”:”Descripción de la segunda categoría”,
  13.             “cad_date”: “2008-10-11”
  14.         },{
  15.             “cad_id”:3,
  16.             “cad_name”:”Categoría 3″,
  17.             “cad_description”:”Descripción de la tercera categoría”,
  18.             “cad_date”: “2008-10-20”
  19.         },{
  20.             “cad_id”:4,
  21.             “cad_name”:”Categoría 4″,
  22.             “cad_description”:”Descripción de la cuarta categoría”,
  23.             “cad_date”: “2008-10-21”
  24.         },
  25.     ]
  26. }

Para ello, el php de prueba tiene este contenido

  1. $retValue = array(
  2.     ‘total’ => 4,
  3.     ‘data’ => array(
  4.         array(
  5.             ‘cad_id’ => 1,
  6.             ‘cad_name’ => ‘Categoría 1’,
  7.             ‘cad_description’ => ‘Descripción de la primera categoría’,
  8.             ‘cad_date’ => ‘2008-10-01’
  9.         ),
  10.         array(
  11.             ‘cad_id’ => 2,
  12.             ‘cad_name’ => ‘Categoría 2’,
  13.             ‘cad_description’ => ‘Descripción de la segunda categoría’,
  14.             ‘cad_date’ => ‘2008-10-11’
  15.         ),
  16.         array(
  17.             ‘cad_id’ => 3,
  18.             ‘cad_name’ => ‘Categoría 3’,
  19.             ‘cad_description’ => ‘Descripción de la tercera categoría’,
  20.             ‘cad_date’ => ‘2008-10-20’
  21.         ),
  22.         array(
  23.             ‘cad_id’ => 4,
  24.             ‘cad_name’ => ‘Categoría 4’,
  25.             ‘cad_description’ => ‘Descripción de la cuarta categoría’,
  26.             ‘cad_date’ => ‘2008-10-21’
  27.         )
  28.     )
  29. );
  30. echo json_encode($retValue);
  1. $retValue = array(
  2.     ‘total’ => 4,
  3.     ‘data’ => array(
  4.         array(
  5.             ‘cad_id’ => 1,
  6.             ‘cad_name’ => ‘Categoría 1’,
  7.             ‘cad_description’ => ‘Descripción de la primera categoría’,
  8.             ‘cad_date’ => ‘2008-10-01’
  9.         ),
  10.         array(
  11.             ‘cad_id’ => 2,
  12.             ‘cad_name’ => ‘Categoría 2’,
  13.             ‘cad_description’ => ‘Descripción de la segunda categoría’,
  14.             ‘cad_date’ => ‘2008-10-11’
  15.         ),
  16.         array(
  17.             ‘cad_id’ => 3,
  18.             ‘cad_name’ => ‘Categoría 3’,
  19.             ‘cad_description’ => ‘Descripción de la tercera categoría’,
  20.             ‘cad_date’ => ‘2008-10-20’
  21.         ),
  22.         array(
  23.             ‘cad_id’ => 4,
  24.             ‘cad_name’ => ‘Categoría 4’,
  25.             ‘cad_description’ => ‘Descripción de la cuarta categoría’,
  26.             ‘cad_date’ => ‘2008-10-21’
  27.         )
  28.     )
  29. );
  30. 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:

  1. /*
  2.  * Creamos el datastore donde se van a almacenar los datos de la tabla
  3.  */
  4. var categoriesDataStore = new Ext.data.Store({
  5.     id: ‘categoriesDS’,
  6.     //Indicamos de donde se va a leer los datos, en este caso un servicio web
  7.     proxy: categoriesDataProxy,
  8.     // Parámetros base que se enviarán al script
  9.     baseParams: {
  10.         language: “es_ES”
  11.     },
  12.     // Indicamos el reader, es decir el procesador de los datos
  13.     reader: categoriesGridReader
  14. });
  1. /*
  2.  * Creamos el datastore donde se van a almacenar los datos de la tabla
  3.  */
  4. var categoriesDataStore = new Ext.data.Store({
  5.     id: ‘categoriesDS’,
  6.     //Indicamos de donde se va a leer los datos, en este caso un servicio web
  7.     proxy: categoriesDataProxy,
  8.     // Parámetros base que se enviarán al script
  9.     baseParams: {
  10.         language: “es_ES”
  11.     },
  12.     // Indicamos el reader, es decir el procesador de los datos
  13.     reader: categoriesGridReader
  14. });

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

  1. var categoriesColumnMode = new Ext.grid.ColumnModel(
  2.     [{
  3.         header: ‘#’,
  4.         dataIndex: ‘cad_id’,
  5.         width: 50,
  6.         hidden: false
  7.     },{
  8.         header: ‘Categoría’,
  9.         dataIndex: ‘cad_name’,
  10.         width: 150
  11.     },{
  12.         header: ‘Descripción’,
  13.         dataIndex: ‘cad_description’,
  14.         width: 300
  15.     },{
  16.         header: ‘Fecha’,
  17.         dataIndex: ‘cad_date’,
  18.         width: 90,
  19.         renderer: Ext.util.Format.dateRenderer(‘d/m/Y’)
  20.     }]
  21. );
  1. var categoriesColumnMode = new Ext.grid.ColumnModel(
  2.     [{
  3.         header: ‘#’,
  4.         dataIndex: ‘cad_id’,
  5.         width: 50,
  6.         hidden: false
  7.     },{
  8.         header: ‘Categoría’,
  9.         dataIndex: ‘cad_name’,
  10.         width: 150
  11.     },{
  12.         header: ‘Descripción’,
  13.         dataIndex: ‘cad_description’,
  14.         width: 300
  15.     },{
  16.         header: ‘Fecha’,
  17.         dataIndex: ‘cad_date’,
  18.         width: 90,
  19.         renderer: Ext.util.Format.dateRenderer(‘d/m/Y’)
  20.     }]
  21. );

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

  1. var categoriesGrid = new Ext.grid.GridPanel({
  2.     id: ‘cat_categoriesGrid’,
  3.     store: categoriesDataStore,
  4.     cm: categoriesColumnMode,
  5.     enableColLock:false,
  6.     selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
  7. });
  1. var categoriesGrid = new Ext.grid.GridPanel({
  2.     id: ‘cat_categoriesGrid’,
  3.     store: categoriesDataStore,
  4.     cm: categoriesColumnMode,
  5.     enableColLock:false,
  6.     selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
  7. });

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

  1. var categoriesColumnMode = new Ext.grid.ColumnModel(
  2.     [{
  3.         header: ‘#’,
  4.         dataIndex: ‘cad_id’,
  5.         width: 50,
  6.         hidden: false
  7.     },{
  8.         header: ‘Categoría’,
  9.         dataIndex: ‘cad_name’,
  10.         width: 150,
  11.         editor: new Ext.form.TextField({})
  12.     },{
  13.         header: ‘Descripción’,
  14.         dataIndex: ‘cad_description’,
  15.         width: 300,
  16.         editor: new Ext.form.TextField({})
  17.     },{
  18.         header: ‘Fecha’,
  19.         dataIndex: ‘cad_date’,
  20.         width: 90,
  21.         renderer: Ext.util.Format.dateRenderer(‘d/m/Y’),
  22.         editor: new Ext.form.DateField({})
  23.     }]
  24. );
  1. var categoriesColumnMode = new Ext.grid.ColumnModel(
  2.     [{
  3.         header: ‘#’,
  4.         dataIndex: ‘cad_id’,
  5.         width: 50,
  6.         hidden: false
  7.     },{
  8.         header: ‘Categoría’,
  9.         dataIndex: ‘cad_name’,
  10.         width: 150,
  11.         editor: new Ext.form.TextField({})
  12.     },{
  13.         header: ‘Descripción’,
  14.         dataIndex: ‘cad_description’,
  15.         width: 300,
  16.         editor: new Ext.form.TextField({})
  17.     },{
  18.         header: ‘Fecha’,
  19.         dataIndex: ‘cad_date’,
  20.         width: 90,
  21.         renderer: Ext.util.Format.dateRenderer(‘d/m/Y’),
  22.         editor: new Ext.form.DateField({})
  23.     }]
  24. );

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

  1. var categoriesGrid = new Ext.grid.EditorGridPanel({
  2.     id: ‘cat_categoriesGrid’,
  3.     store: categoriesDataStore,
  4.     cm: categoriesColumnMode,
  5.     enableColLock:false,
  6.     selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
  7. });
  1. var categoriesGrid = new Ext.grid.EditorGridPanel({
  2.     id: ‘cat_categoriesGrid’,
  3.     store: categoriesDataStore,
  4.     cm: categoriesColumnMode,
  5.     enableColLock:false,
  6.     selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
  7. });

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

  1. var categoriesGridTopbar = new Ext.Toolbar({
  2.     id: ‘categoriesGridTopbarId’,
  3.     items: [
  4.         ‘->’,
  5.         {
  6.             xtype:’button’,
  7.             text:’Guardar Cambios’,
  8.             id: ‘portadas_ToolbarTop_btn0’,
  9.             handler:categoriesGridTopbarHnd,
  10.             type:’button’
  11.         }
  12.     ]
  13. });
  1. var categoriesGridTopbar = new Ext.Toolbar({
  2.     id: ‘categoriesGridTopbarId’,
  3.     items: [
  4.         ‘->’,
  5.         {
  6.             xtype:’button’,
  7.             text:’Guardar Cambios’,
  8.             id: ‘portadas_ToolbarTop_btn0’,
  9.             handler:categoriesGridTopbarHnd,
  10.             type:’button’
  11.         }
  12.     ]
  13. });

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.

  1.     var failureAjaxFn = function(response, request) {
  2.         Ext.Msg.show({
  3.             title: ‘Error’,
  4.             msg: ‘Cambios no guardados. Status:’ + response.status,
  5.             buttons: Ext.Msg.OK,
  6.             animEl: ‘elId’,
  7.             icon: Ext.MessageBox.ERROR
  8.         });
  9.     }
  10.     var successAjaxFn = function(response, request) {
  11.         /*
  12.          * En response.responseText tenemos la respuesta del script, en este caso
  13.          * la salida del script PHP es JSON con lo que tenemos que decodificarlo
  14.          */
  15.         var jsonData = Ext.util.JSON.decode(response.responseText);
  16.         if (true == jsonData.success) {
  17.             Ext.Msg.show({
  18.                 title: ‘Operación completada’,
  19.                 msg: jsonData.message,
  20.                 buttons: Ext.Msg.OK,
  21.                 animEl: ‘elId’,
  22.                 icon: Ext.MessageBox.INFO
  23.             });
  24.             /*
  25.              * PASO IMPORTANTE
  26.              * Para indicar al store que los cambios se han realizado correctamente
  27.              * y eliminar los indicadores de que hay cambios pendientes de guardar
  28.              * hay que llamar
  29.              */
  30.             categoriesDataStore.commitChanges();
  31.         } else {
  32.             Ext.Msg.show({
  33.                 title: ‘Error’,
  34.                 msg: jsonData.message,
  35.                 buttons: Ext.Msg.OK,
  36.                 animEl: ‘elId’,
  37.                 icon: Ext.MessageBox.ERROR
  38.             });
  39.         }
  40.     }
  41. var categoriesGridTopbarHnd = function (e,o) {
  42.         /*
  43.          * Pedimos al store que nos devuelva los registros modificados
  44.          */
  45.         var modifiedRecords = categoriesDataStore.getModifiedRecords()
  46.         if (modifiedRecords.length > 0) {
  47.             /*
  48.              * Creamos un array con los datos de los registros que han cambiado
  49.              */
  50.             var changes = new Array();
  51.             for (var i=0; i < modifiedRecords.length; i++){
  52.                 changes.push(modifiedRecords[i].data);
  53.             }
  54.             /*
  55.              * Codificamos los cambios en JSON
  56.              */
  57.             changes = Ext.util.JSON.encode(changes);
  58.             Ext.Ajax.request({
  59.                 url: ‘salvarDatos.php’,
  60.                 method: ‘POST’,
  61.                 success: successAjaxFn,
  62.                 failure: failureAjaxFn,
  63.                 timeout: 30000,
  64.                 params: {
  65.                     operation: ‘update’,
  66.                     changes: changes
  67.                 }
  68.             });
  69.         }
  70.     }
  1.     var failureAjaxFn = function(response, request) {
  2.         Ext.Msg.show({
  3.             title: ‘Error’,
  4.             msg: ‘Cambios no guardados. Status:’ + response.status,
  5.             buttons: Ext.Msg.OK,
  6.             animEl: ‘elId’,
  7.             icon: Ext.MessageBox.ERROR
  8.         });
  9.     }
  10.     var successAjaxFn = function(response, request) {
  11.         /*
  12.          * En response.responseText tenemos la respuesta del script, en este caso
  13.          * la salida del script PHP es JSON con lo que tenemos que decodificarlo
  14.          */
  15.         var jsonData = Ext.util.JSON.decode(response.responseText);
  16.         if (true == jsonData.success) {
  17.             Ext.Msg.show({
  18.                 title: ‘Operación completada’,
  19.                 msg: jsonData.message,
  20.                 buttons: Ext.Msg.OK,
  21.                 animEl: ‘elId’,
  22.                 icon: Ext.MessageBox.INFO
  23.             });
  24.             /*
  25.              * PASO IMPORTANTE
  26.              * Para indicar al store que los cambios se han realizado correctamente
  27.              * y eliminar los indicadores de que hay cambios pendientes de guardar
  28.              * hay que llamar
  29.              */
  30.             categoriesDataStore.commitChanges();
  31.         } else {
  32.             Ext.Msg.show({
  33.                 title: ‘Error’,
  34.                 msg: jsonData.message,
  35.                 buttons: Ext.Msg.OK,
  36.                 animEl: ‘elId’,
  37.                 icon: Ext.MessageBox.ERROR
  38.             });
  39.         }
  40.     }
  41. var categoriesGridTopbarHnd = function (e,o) {
  42.         /*
  43.          * Pedimos al store que nos devuelva los registros modificados
  44.          */
  45.         var modifiedRecords = categoriesDataStore.getModifiedRecords()
  46.         if (modifiedRecords.length > 0) {
  47.             /*
  48.              * Creamos un array con los datos de los registros que han cambiado
  49.              */
  50.             var changes = new Array();
  51.             for (var i=0; i < modifiedRecords.length; i++){
  52.                 changes.push(modifiedRecords[i].data);
  53.             }
  54.             /*
  55.              * Codificamos los cambios en JSON
  56.              */
  57.             changes = Ext.util.JSON.encode(changes);
  58.             Ext.Ajax.request({
  59.                 url: ‘salvarDatos.php’,
  60.                 method: ‘POST’,
  61.                 success: successAjaxFn,
  62.                 failure: failureAjaxFn,
  63.                 timeout: 30000,
  64.                 params: {
  65.                     operation: ‘update’,
  66.                     changes: changes
  67.                 }
  68.             });
  69.         }
  70.     }

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:

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

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”:

  1. var categoriesGrid = new Ext.grid.EditorGridPanel({
  2.     id: ‘cat_categoriesGrid’,
  3.     store: categoriesDataStore,
  4.     cm: categoriesColumnMode,
  5.     enableColLock:false,
  6.     tbar: categoriesGridTopbar,
  7.     bbar: categoriesPagingBar,
  8.     selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
  9. });
  1. var categoriesGrid = new Ext.grid.EditorGridPanel({
  2.     id: ‘cat_categoriesGrid’,
  3.     store: categoriesDataStore,
  4.     cm: categoriesColumnMode,
  5.     enableColLock:false,
  6.     tbar: categoriesGridTopbar,
  7.     bbar: categoriesPagingBar,
  8.     selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
  9. });

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

  1. categoriesDataStore.load({params: {start: 0, limit: 10}});
  1. 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.

3 thoughts on “Introducción a los Grids en ExtJS

  1. hola, podrías poner un ejemplo real, si es posible compartir los ficheros, de como llenar un grid desde una base de datos ya sea Mysql o cualquiera, usando php o python.. gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *