Grids en ExtJS 4

La Grilla es una de las piezas centrales de Ext JS. Es un componente muy verstil que
proporciona una gran manera de ver muchos datos a la vez, con el formato exactamente como
usted lo necesite. Con Ext JS 4 hemos reacondicionado la grilla, por lo que es ms rpida, ms
ligera y ms fcil de personalizar.

Componentes de Grillas
Artculo original: Grid Components

Renderizacin inteligente
La Grilla Ext JS 3 funciona fantsticamente bien, pero se necesita del mnimo comn
denominador para dar soporte caracterstica ricas por la continua la generacin del marcado
de todo lo necesario de todas las caractersticas de Grilla (que es excesivamente pesada en la
mayora de los casos). En Ext JS 4, la grilla por defecto tiene un marcado muy ligero, y
caractersticas adicionales especficas de marcado slo se representan cuando los
desarrolladores activan las diferentes caractersticas . Este es un gran impulso tanto para la
velocidad de representacin de pginas como para el rendimiento de Grilla en general.

Diseo estandarizado
Junto con una secuencia de representacin ms inteligente, muchas partes de la nueva grilla
se han convertido en componentes adecuados e integrados en el sistema de gestin de diseo
estndar en lugar de confiar en marcados y CSS internos. Esto nos permite unificar el proceso
de renderizado de la grilla con el resto de la estructura, manteniendo al mismo tiempo una
experiencia de interfaz de usuario con precisin de pxel.

DataView
El GridView nuevo en Ext JS 4 ampla la clase DataView estndar. Esto no slo minimiza la
duplicacin de cdigo interno, sino que tambin hace que la nueva grilla sea an ms fcil de
personalizar. Porque se extiende DataView, la nueva red es tambin capaz de aprovechar los
mismos modelos de seleccin como cualquier otra vista, incluso la seleccin no contigua a
travs de la navegacin mediante teclado.

Soporte de Caracteristicas
En Ext JS 3, era fcil de aadir nuevas funcionalidades a las grillas, pero no haba una estrategia
nica para hacerlo. Muchas caractersticas nuevas, se adjuntaron como plugins, pero algunas
fueron proporcionados por subclases. Esto hace muy difcil (si no imposible) combinar ciertas
caractersticas con facilidad.
Ext JS 4 incluye una nueva clase base de Grilla llamada Ext.grid.Feature que proporciona la
base para la creacin de caractersticas de grilla opcionales extremadamente flexibles. Las
plantillas de Grilla subyacentes pueden ser modificado por cualquier clase de caractersticas
con el fin de decorar o mutar del marcado esa vista que la grilla genera. Caractersticas
proporcionan una poderosa alternativa a la antigua subclasificacin de GridView, ya que hace
que sea fcil de mezclar y combinar caractersticas compatibles. Algunos ejemplos de las
caractersticas de la nueva red son RowWrap, RowBody and Grouping.

Scroll Virtual
La Grilla de ExtJS 4 ahora soporta de forma nativa el bffering de sus datos durante la
representacin, proporcionando unas vistas virtuales, cargables bajo demanda, de sus datos.
Las grillas ahora soportan fcilmente cientos o incluso miles de registros sin paginacin, lo que
significa una mejora enorme en la manipulacin de datos sobre la Grilla de Ext JS 3.

Mejoras al Editar
En Ext JS 3, los desarrolladores tuvieron que utilizar la clase EditorGrid especializada para
facilitar una grilla modificable, lo que limita su flexibilidad. En Ext JS 4, ahora hay un plugin de
edicin que se pueden aplicar a cualquier instancia de Grilla, lo que es totalmente reutilizable a
travs de todas las grillas. Adems, la extensin popular RowEditor de Ext JS 3 ha sido
promovida a un componente de primera clase y apoyado plenamente en el framework Ext JS 4.

Un Ejemplo

Aqu est la configuracin de una grilla bsica con agrupamiento en Ext JS 4. Es imposible
cubrir todas las nuevas funcionalidades en un solo ejemplo, pero esto debe darle una buena
muestra de la nueva grilla en la accin. Como puede ver, la configuracin es muy similar a la de
Ext JS 3, pero la funcionalidad de agrupacin es ahora una caracterstica de configuracin
simple, en lugar de una instancia completa GroupingView personalizada como se requiere en
Ext JS 3.
Esto es slo un ejemplo de la nueva flexibilidad en Ext JS 4. Adems, la agrupacin est
apoyado directamente en el Store estndar, por lo que un GroupingStore separado ya no es
necesario.
Ext.onReady(function() {
Ext.define('Teams', {
extend: 'Ext.data.Model',
fields: ['name', 'sport']
});

var teamStore = new Ext.data.Store({

model: 'Teams',
sorters: ['sport','name'],
groupField: 'sport',
data: [
{ name: 'Aaron', sport: 'Table Tennis' },
 { name: 'Aaron', sport: 'Football' },
{ name: 'Abe', sport: 'Basketball' },
{ name: 'Tommy', sport: 'Football' },
{ name: 'Tommy', sport: 'Basketball' },
{ name: 'Jamie', sport: 'Table Tennis' },
{ name: 'Brian', sport: 'Basketball' },
{ name: 'Brian', sport: 'Table Tennis' }
]
});

var grid = new Ext.grid.Panel({

renderTo: Ext.getBody(),
store: teamStore,
width: 400,
height: 300,
title: 'Sports Teams',
features: [{
ftype: 'grouping'
}],
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Sport',
dataIndex: 'sport'
}]
});
});

________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________

Introduccin a los Grids en ExtJS

En ExtJS tenemos bsicamente dos tipos de grids, los que nicamente son para listar
informacin (los llamaremos Grids bsicos) y los grids editables, que permiten editar la
informacin que se lista dentro de ellos.

Grid bsico

En los grids tenemos que distinguir 3 partes importantes:

El store de datos
El modelo de datos de las columnas
La definicin 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. Bsicamete se tratan de arrays de datos, pero su particularidad es que pueden leer los
datos desde diversas fuentes:

Estticas: ficheros XML o variables de tipo array

Dinmicas: servicios de datos XML o JSON

En la definicin 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

view plaincopy to clipboardprint?

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

Despus, 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 vendrn codificados en JSON

view plaincopy to clipboardprint?

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 configuracin del reader es fcil de entender:

Mediante el campo root, indicamos la etiqueta bajo la que llegarn los datos, en este
caso data
El campo totalProperty nos indica en qu etiqueta nos llega el nmero total de registros
El campo id, nos indica en qu campo nos llega la identificacin del registro
Una vez tenemos configurado el registro y el reader, definimos el proxy de datos (para una
carga remota de los mismos).

view plaincopy to clipboardprint?

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' // Mtodo de envo
7. });

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

view plaincopy to clipboardprint?

1. {
2. "total":3,
3. "data":[
4. {
5. "cad_id":1,
6. "cad_name":"Categora 1",
7. "cad_description":"Descripcin de la primera categora",
8. "cad_date": "2008-10-01"
9. },{
10. "cad_id":2,
11. "cad_name":"Categora 2",
12. "cad_description":"Descripcin de la segunda categora",
13. "cad_date": "2008-10-11"
14. },{
15. "cad_id":3,
16. "cad_name":"Categora 3",
17. "cad_description":"Descripcin de la tercera categora",
18. "cad_date": "2008-10-20"
19. },{
20. "cad_id":4,
21. "cad_name":"Categora 4",
22. "cad_description":"Descripcin de la cuarta categora",
23. "cad_date": "2008-10-21"
24. },
25. ]
26. }

Para ello, el php de prueba tiene este contenido

view plaincopy to clipboardprint?

1. $retValue = array(
2. 'total' => 4,
3. 'data' => array(
4. array(
5. 'cad_id' => 1,
6. 'cad_name' => 'Categora 1',
7. 'cad_description' => 'Descripcin de la primera categora',
8. 'cad_date' => '2008-10-01'
9. ),
10. array(
 11. 'cad_id' => 2,
12. 'cad_name' => 'Categora 2',
13. 'cad_description' => 'Descripcin de la segunda categora',
14. 'cad_date' => '2008-10-11'
15. ),
16. array(
17. 'cad_id' => 3,
18. 'cad_name' => 'Categora 3',
19. 'cad_description' => 'Descripcin de la tercera categora',
20. 'cad_date' => '2008-10-20'
21. ),
22. array(
23. 'cad_id' => 4,
24. 'cad_name' => 'Categora 4',
25. 'cad_description' => 'Descripcin de la cuarta categora',
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 despus codificar mediante al funcin json_encode (PHP5), o bien (en PHP4) utilizar
la librera de codificacin 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:

view plaincopy to clipboardprint?

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. // Parmetros base que se enviarn 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.

view plaincopy to clipboardprint?

1. var categoriesColumnMode = new Ext.grid.ColumnModel(

2. [{
3. header: '#',
4. dataIndex: 'cad_id',
5. width: 50,
 6. hidden: false
7. },{
8. header: 'Categora',
9. dataIndex: 'cad_name',
10. width: 150
11. },{
12. header: 'Descripcin',
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:

view plaincopy to clipboardprint?

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

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

Grid editable

Adems de los grids bsicos, 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 definicin 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 definicin de un campo editable cuyo objeto puede ser cualquiera de los que hay disponibles
para los formularios (cajas de texto, combos, fechas, tiempo)

view plaincopy to clipboardprint?

1. var categoriesColumnMode = new Ext.grid.ColumnModel(

2. [{
3. header: '#',
4. dataIndex: 'cad_id',
5. width: 50,
6. hidden: false
7. },{
8. header: 'Categora',
9. dataIndex: 'cad_name',
10. width: 150,
11. editor: new Ext.form.TextField({})
12.
13. },{
14. header: 'Descripcin',
15. dataIndex: 'cad_description',
 16. width: 300,
17. editor: new Ext.form.TextField({})
18. },{
19. header: 'Fecha',
20. dataIndex: 'cad_date',
21. width: 90,
22. renderer: Ext.util.Format.dateRenderer('d/m/Y'),
23. editor: new Ext.form.DateField({})
24. }]
25. );

La modificacin del grid es ms fcil. En este caso slo hay que heredar de otra clase distinta:
EditorGridPanel

view plaincopy to clipboardprint?

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 pequeo 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 ningn mecanismo para automatizar el guardado de datos, dejando a eleccin
del programador la eleccin del mtodo. 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 accin en algn botn o componente

Qu mtodo utilizar queda a eleccin del desarrollador segn las circunstancias en las que se
encuentre. En este caso vamos a explicar cmo se hara un envo de todos los cambios. Para ello
vamos a coger el ejemplo anterior y primeramente aadir un botn de actualizacin de cambio
situado en una barra de herramientas superior

view plaincopy to clipboardprint?

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 botn, que ser el que tender la peticin de
guardado de cambios y que contendr toda la lgica de actualizacin

En el handler, lo que hemos hecho es crear una llamada Ajax que enve 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
enva como una variable POST normal. Despus es tarea del script php (o Java, o lo que sea) de
tratar el array de cambios y realizar las actualizaciones pertinentes.

view plaincopy to clipboardprint?

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.
11. var successAjaxFn = function(response, request) {
12. /*
13. * En response.responseText tenemos la respuesta del script, en este caso
14. * la salida del script PHP es JSON con lo que tenemos que decodificarlo
15. */
16. var jsonData = Ext.util.JSON.decode(response.responseText);
17.
18. if (true == jsonData.success) {
19. Ext.Msg.show({
20. title: 'Operacin completada',
21. msg: jsonData.message,
22. buttons: Ext.Msg.OK,
23. animEl: 'elId',
24. icon: Ext.MessageBox.INFO
25. });
26.
27. /*
28. * PASO IMPORTANTE
29. * Para indicar al store que los cambios se han realizado correctament
e
30. * y eliminar los indicadores de que hay cambios pendientes de guardar

31. * hay que llamar

32. */
33. categoriesDataStore.commitChanges();
34.
35. } else {
36. Ext.Msg.show({
37. title: 'Error',
38. msg: jsonData.message,
39. buttons: Ext.Msg.OK,
40. animEl: 'elId',
41. icon: Ext.MessageBox.ERROR
42. });
43. }
44. }
45. var categoriesGridTopbarHnd = function (e,o) {
 46. /*
47. * Pedimos al store que nos devuelva los registros modificados
48. */
49. var modifiedRecords = categoriesDataStore.getModifiedRecords()
50.
51. if (modifiedRecords.length > 0) {
52. /*
53. * Creamos un array con los datos de los registros que han cambiado
54. */
55. var changes = new Array();
56. for (var i=0; i < modifiedRecords.length; i++){
57. changes.push(modifiedRecords[i].data);
58. }
59.
60. /*
61. * Codificamos los cambios en JSON
62. */
63. changes = Ext.util.JSON.encode(changes);
64.
65. Ext.Ajax.request({
66. url: 'salvarDatos.php',
67. method: 'POST',
68. success: successAjaxFn,
69. failure: failureAjaxFn,
70. timeout: 30000,
71. params: {
72. operation: 'update',
73. changes: changes
74. }
75. });
76. }
77. }
78.
79.

Grids paginados

Uno de las barras de herramientas ms utilizadas con los grids es la de paginacin. Su utilizacin
es
bastante sencilla. Primero creamos la barra de paginacin:

view plaincopy to clipboardprint?

1. var categoriesPagingBar = new Ext.PagingToolbar({

2. pageSize: 10,
3. store: categoriesDataStore,
4. displayInfo: true
5. });

Su uso es sencillo, slo tenemos que indicar cual es el store, y el tamao de pgina. Despus de
definirlo
se lo asociamos al grid, para lo que slo tenemos que indicar en la configuracin
lo siguiente bbar: categoriesPagingBar:

view plaincopy to clipboardprint?

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

Despus en la carga inicial de datos, indicamos que queremos cargar la primera pgina de
resultados
y el nmero de ellos

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

Y despus de esto ya no nos tenemos que preocupar de nada ms, pues cada vez que hagamos
click en los botones el store nos enviar dos variables nuevas: start y limit, al estilo de las
paginaciones clsicas

-----------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------

ExtJS: Exportar de GRID para Excel

08 Feb 2010
1 min read
FacebookTwitterWhatsAppTelegramMore
Esse tutorial ir abordar como exportar dados de um ExtJS DataGrid para um
arquivo Excel.

s vezes, o usurio deseja exportar os dados de um graid para um arquivo excel

(.xls ou .csv).
Existe um plugin ExtJS desenvolvido por terceiros que faz isso para voc.

Existem alguns "probleminhas" que voc deve saber antes de comear:

S funciona em browsers que suportam data URLs (URL com dados), como
Firefox, Opera e IE8.
Testei com as seguintes verses do ExtJS: 2.2.1, 3.0, 3.0.3 e 3.1, mas s
funcionou na verso 3.0. Se algum estiver usando alguma outra verso e
conseguir fazer funcionar, me avise, pois posso ter esquecido de algum
detalhe.
S funcionad com os dados que esto no data Store - se voc usar
paginao, ento crie um mtodo para exportar no lado servidor. Esse plugin
apenas til para quem desejar exportar uma pequena tabela para o Excel
(todos os dados visveis na tela).
Se os dados no Store forem volteis (podem mudar, sofrer update, etc), a
URL para exportao deve ser recalculada.

Vamos comear:

Primeiro, crie um arquivo javascript no projeto e cole o seguinte cdigo (criei um

arquivo exporter.js): http://github.com/loiane/extjs-export-
excel/blob/master/WebContent/js/exporter.js (esse arquivo tem muitas linhas, por
isso no coloquei/colei o contedo aqui).

E no cdigo que contm o grid, adiciona o seguinte cdigo:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]

var linkButton = new Ext.LinkButton({
id: 'grid-excel-button',
text: 'Export to Excel'
});

//create the Grid

var grid = new Ext.grid.GridPanel({
bbar: new Ext.Toolbar({
buttons: [linkButton]
})
});
linkButton.getEl().child('a', true).href = 'data:application/vnd.ms-excel;base64,' +
Base64.encode(grid.getExcelXml());
[/code]

Se tentar exportar a tabela da figura (por exemplo) para o arquivo excel, vai ficar
mais ou menos assim:

Voc tambm pode trocar as cores, fontes, etc. D uma olhada no cdigo do
exporter.js, tente enterder e faa a mudanas que desejar.

Ed Spencer tambm desenvolveu um plugin similar. O cdigo fonte dele est mais
limpo que este. Porm, o arquivo Excel gerado ser o mesmo.

Voc pode fazer o donwload do projeto exemplo (JEE) do meu repositrio

GitHub: http://github.com/loiane/extjs-export-excel