Como construir um grid dinâmico utilizando Ext JS
É 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!
Salve,Salve Loiane..
Bom dia, eu, já na altura de meus 40 anos, sou e sempre fui um adepto à aprender novas técnicas e tecnologia, sou desenvolvedor Delphi, creio que a uns 12 anos, atualmente andei fazendo um refactoring em minha carreira.
Cheguei a conclusão que preciso dar mais aos meus sistemas e clientes, penso em aprender php ou java, já que sempre utilizei OO no delphi creio que não deva ter tanta dificuldade.
Encontrei seu blog ao acaso, hoje em pleno domingo estou na net desde as 06:30 pesquisando sobre php e java.
Os sistemas que desenvolvemos hoje na mina empresa, utilizamos delphi com Firebird/MSSqlServer, acessando remotamente em um modelo de aplicação de 3 camadas.
Penso em algo diferente, e que esta me tirando o sono, algo como uma linguagem nova, com novas features e claro novos horizontes.
Seria possível a amiga me dar umas dicas sobre java, digo por exemplo no caso da IDE, fico em dúvida qto ao NetBeans e o Eclipse, sobre este último vou no site mas não entendo qual versão baixar.
Estou querendo começar com um sistema pequeno, mas onde eu possa explorar bastante as funcionalidades de acesso a banco de dados, relatórios, acesso remoto.
Nossa, divaguei e muito..rsrs
Mas nos finalmente.. se puder me dar uma dica de qual versão do java baixar, ide e também configuração ficarei muito grato.
Para tanto deixo aqui meu e-mail e também msn.
faustoalves@gmail.com
Franca-SP
Brasil
Olá tudo bom?
Tem como você postar(ou me enviar melhor =]) um exemplo do retorno em json que o seu código gera para criar as colunas?
Abraço.
Bom dia Loiane,
Bem estou desenvolvendo um sistema e precisei de criar um grid que fosse dinâmico, logo que eu vi seu exemplo fiquei bem tranquilo pois foi só eu adequá-lo para as minhas necessidades, porém encontrei um novo problema, quando atualizamos a versão do arquivo ext-all para 3.1 o titulo das colunas nao esta mais aparecendo, se caso souber como resolver teria com me auxiliar? Desde já agradeço a sua atenção, parabéns pelo site.
Bom dia Loiane, modifiquei seu exmplo para usar com o ext 4 alterei algumas coisas, so que não consigo capturar as colunas pois nessa versão não existe um Ext.grid.ColumnModel. Estou tentando construir 1 grid dinamico na versão 4. Se tiver algo que possa me ajudar. Grato.
Olá Sergio,
Não existe mais ColumnModel no Grid do ExtJS 4. Você teria que usar a configuração columns nessa nova versão.
Loiane ainda sou novo com o extjs, pois utilizava mais o ext gwt, gostaria de saber se vc teria uma sugestão de como ficaria esse columns?
Boa tarde, consegui fazer o grid dinamico na versão 4 do ext, me baseei nesse site http://www.sencha.com/forum/showthread.php?135873-ExtJs4-autogrid-solution caso alguem precise.
Olá Sergio,
É a mesa solução apresentada neste post, só adaptada para a nova versão com a config columns.
[]‘s
Obrigado Loiane pelas dicas… também conferi a versão que o Sergio comentou, pois comecei a utilizar a versão 4.
Loiane.. no exemplo que o Sergio postou… como eu poderia fazer pras colunas ficarem editáveis? Usei o Ext.grid.plugin.CellEditing e mesmo assim não consigo…
Obrigado
Olá, se eu fiz usando php e teria que ser obrigado código php
Bom dia Loiane,
Eu procurei por vários exemplos que mostrasse uma combo com mais de uma variável e não achei.
É possível ter esta condição?
Exemplo que que gostaria que mostrasse quando clicar na combo:
Código,Cidade,UF.
Outro exemplo de combo:
Código,Funcionário,Nome do Setor
Aguardo sua resposta.
Oi Edvaldo,
Pode sim, basta trabalhar com template.
Exemplo:
tpl: '
{first_name} {last_name} ({email})
', Essa config tpl vai dentro do combobox, vc continua tendo o seu valuefield e displayfield.
[]‘s