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!
AHEuhaeuhuaheae … êta minia do JS!
Bacanasso o artigo!
Vô retuitá tá ?
Muito massa esse tutorial… já tentou implementar REST com Jersey?
Ainda não, mas vou estudar sobre isso.
Valeu pela dica!
Muito bom o post não vejo a hora de começar estudar Ext JS, parabéns!
[...] já postei aqui no blog sobre Ext JS (aqui, aqui e aqui), JSON (aqui e aqui) e Spring (aqui). O objetivo do post de hoje é juntar todas essas [...]
Parabens pelo tutorial utilizando JSON, a didática esta legal, eu estou atrás de artigos na web falando a respeito de json e exemplos de aplicações. Eu só não entendi uma coisa… No seu projeto, dentro de WEB-INF existe um arquivo chamado “contatos.json” e nele contem td a saída que o json espera… a dúvida é: Pra que esse arquivo esta servindo? Como devo utiliza-lo?
Olá Ricardo,
Coloquei esse arquivo apenas como exemplo.
Num projeto de verdade, devemos utilizar os dados que buscamos no servidor.
Mas você também pode utilizar um arquivo estático como esse, como por exemplo, se tiver mostrando um grid com os estados do Brasil, pode utilizar o arquivo, afinal, esses dados não sofrerão mudanças.
Loiane, muito legal seus posts sobre ExtJS, pore´m estou com uma dúvida, consigo imprimir na tela os dados do Json porém não consigo colocá-los na Grid. Até mais!
Como tá seu codigo do store com o grid? Pode enviar ou postar?
Abraços
Please, help me, how to do this application with google app engine, thanks. It cannot read the json file. It needs maybe other libraries?
Boa tarde Loiane , parabéns pelo port.
Estou começando agora com ExtJs, e to usando seu exemplo como estudo, e apareceu uma dúvida.
Alterei o arquivo gridjson.js retirando Aniversario , mais quando executo o programa ele mantém a coluna DATA NASC.
Obrigado
Olá Franklin,
Você precisa retirar o campo tanto da Store/Record quanto do Grid.
[]‘s
store: store, columns: [ {header: "NOME", width: 170, sortable: true, dataIndex: 'nome'}, {header: "TELEFONE", width: 150, sortable: true, dataIndex: 'telefone'}, {header: "EMAIL", width: 150, sortable: true, dataIndex: 'email'} ],
reader:new Ext.data.JsonReader({ totalProperty:’total’, root:’rows’, fields: [ 'nome', 'telefone', 'email' ] })
Já alterei ambos e mesmo assim vem DATA NASC.
Com o código está tudo ok, a coluna não deveria aparecer mesmo.
Já tentou limpar o cache, dar refresh no projeto antes de fazer re-deploy?
Loiane Boa noite , qual é a versão do Extjs está utilizando nesse exemplo, e ela é compativel com a versão 3.4? Obrigado
Olá Franklin,
Estou usando a versão 3.x também.
O grid não sofreu mudanças de uma release para a outra na versão 3.x
[]s