É muito simples criar um grid/tabela estático usando o widget grid da biblioteca Ext JS. O problema começa quando você quer criar um grid totalmente dinâmico.

Mas, em primeiro lugar, o que quero dizer com grid dinâmico?

Nos post anteriores sobre Ext JS, quando criava um grid, já sabia quais eram as colunas que iriam aparecer na tela para o usuário, e apenas escrevia o nome delas na configuração do grid:

Mas e se eu tenho uma aplicação em que o usário tem a opção de escolher quais são as colunas/informações que ele quer ver? E Se o usuário tem a opção de ver 20 colunas e só escolher ver 5 delas? Eu não posso mostrar as outras 15 colunas se ele não optou por visulizar. Isso é que é criar um grid dinâmico.

E como eu implemento isso em Ext JS?

Esse foi um probleminha que gastei quase 1 semana de trabalho tentando resolver, já que estava apenas começando a brincar com a biblioteca javascript.

Procurei em vários blogs e no fórum oficial. As informações era vem escassas. Até que encontrei um exemplo que me deu a idéia de implementar a solulção que vou apresentar aqui.

Assim como nos exemplo anteriores, estou usando o Eclipse para desenvolver + Spring Framework (MVC e IoC) + json-lib-ext-spring (biblioteca para usar Json + Spring) + Ext JS 2.x.

Para deixar o grid totalmente dinâmico, preciso de uma maneira para configurar a definição das Colunas (Ext.grid.ColumnModel) e uma outra maneira para configurar os campos/fields do Ext.data.Store.

Configurando as colunas – Ext.grid.ColumnModel

Para representar as informações das colunas que definem o Ext.grid.ColumnModel, criei uma classe baseada nas informações que encontrei na documentação (http://extjs.com/deploy/ext/docs/output/Ext.grid.ColumnModel.html – Config Option). Como atributo, coloquei apenas aqueles que quero/preciso usar:

Também foi criado um método genérico para criar um determinado número de colunas.

E no Controller, preciso criar o objeto json que possui as informações referentes as colunas:

No código Ext Js, carrego os dados, declaro quais são os campos da classe e adiciono um listener para tratar os dados e criar o Ext.grid.ColumnModel. Assim, vai pegar as informações (como se fosse carregar em um grid estático) e mapeá-las para o objeto correto:

E já temos as colunas configuradas.

Agora precisamos configurar os campos e obter os dados que irão popular o grid (dinâmico).

Configurando os Campos/Fields do data.Store

Da mesma forma que fizemos com a configuração das colunas, também precisamos configurar dinamicamente os campos/fields. Mas como fazer isso ao mesmo tempo que tenho que carregar os dados do grid?

Uma das soluções é adicionar metadados (http://extjs.com/deploy/ext/docs/output/Ext.data.Store.html). Assim, podemos dizer em tempo real quais são as configurações para os dados do Store.

Nos metadados, defini as seguintes configurações: rows, totalProperty e fields. Rows são os dados que irão popular o grid. TotalProperty é a propriedade que indica o total de registros/linhas que a propriedade rows contém (e se tiver usando paginação, o total de registros). E fields é a propriedade que indica a configuração dos fields/campos.

Criei uma classe para representar os fields/campos do data.Store. Nela, apenas coloquei o atributo que é mais necessário, que é o nome do campo. Se desejar ou for preciso, também pode definir o tipo do dado e outras opções, que podem ser encontradas no link (http://extjs.com/deploy/ext/docs/output/Ext.data.Record.html – create).

É preciso criar um objeto (neste caso em formato JSON) que represente essas propriedades, conforme a figura abaixo:

Então, foi criado um método para gerar um objeto que representa a figura acima:

E o um método para criar os dados:

E no controller, fazer a junção de todas as informações. Uma observação importante, que, dependendo do caso, pode ter um impacto na performance: os metadados só precisam ser criados na primeira vez, pois o Store não conhece a configuração. Da segunda vez em diante, apenas é preciso fornecer os dados para popular o grid:

No código Ext JS, criamos um Store ‘vazio’, apenas indicando a url onde deverá obter as informações.

E por último, precisamos indicar ao Store, que as informações contém metadados. Para isso, usamos o parâmetro/valor ‘meta:true’:

E o resultado é este:

O código completo desse post você pode fazer o download aqui (formato projeto Eclipse) – 4,95MB

E se ainda não sabe como fazer para importar o projeto no eclipse e executar, pode conferir aqui.

Até a próxima!

Posts Similares

• Como Montar um Grid utilizando Ext JS + Json + Spring
• Como Montar um Grid com Paginação utilizando Ext JS
• JSON + Spring
• Como Montar um Grid utilizando Ext JS + Json + Java
• JSON e Java