Como Montar um Grid utilizando Ext JS + Json + Java
No primeiro exemplo de grid utilizando Ext JS, foi utilizado um array simples para popular a tabela. Porém, pode ser que alguma aplicação precise mostrar uma tabela/grid de dados estáticos, mas na
maioria dos casos, precisamos buscar essas informações em um banco de dados.
O post de hoje tem como objetivo mostrar como construir um grid em Ext JS utilizando as informações contidas em um objeto Json, que foi gerado pelo java.
Vamos pegar o código utilizado para contruir o grid com um array simples e fazer algumas modificações para obter os dados do Json:
A principal mudança está na modificação do data.Reader, e neste, vamos modificar 3 pontos básicos:
- Precisamos acrescentar a url de configuração, que especifica o local onde está o dado/json.
- Precisamos acrescentar um reader (JsonReader), que é responsável por ler e manipular as informaçõescontidas no Json.
- Precisamos dizer qual é o elemento raiz do json, ou seja, qual é o elemento que possui os dados que irão popular a tabela/grid
O novo data.Store ficará assim:
Ou seja, vamos obter os dados em formato Json de um arquivo chamado contatojson.jsp, cujo elemento principal (root) chama-se rows e tem um total X de elementos (totalProperty - opcional).
Vamos dar uma olhada agora no arquivo contatojson.jsp:
Como o foco principal deste post é obter o dado Json, fiz um jsp com scriplet mesmo, apesar de feio, é bem simples (mas não façam isso em casa nem no trabalho! =D)
A classe ContatoJson possui um único método que tem como objetivo gerar o objeto em formato Json:
Note a linha: JSONArray jsonArray = JSONArray.fromObject(contatos);
Utilizei a biblioteca json-lib para fazer o parse. Para maiores informações, consulte: http://json-lib.sourceforge.net/
A classe Contato é apenas um POJO com 4 atributos: nome, email, telefone, aniversário. E a classe GeradorContatos também possui um único método que gera alguns contatos.
Na url, você pode colocar também o nome do arquivo que já possui a informação em formato json:
E o resultado:
Como já dito em posts anteriores, você também pode colocar a url de uma action do Struts ou Spring, e utilizar em seus projetos MVC.
O código completo desse post você pode fazer o download aqui (formato projeto Eclipse)
E se ainda não sabe como fazer para importar o projeto no eclipse e executar, pode conferir aqui.
Até a próxima!
:)