Featured Posts

Carreira em TI: Currículo em Inglês Uma das grandes dificuldades para as pessoas da área de TI é, muitas vezes, escrever um bom currículo em inglês. E ter um currículo em inglês, é essencial, já que inglês é tão importante quanto...

Readmore

Entrevista para o Jornal A Tribuna Jan/2010: Profissões... Na última de semana de janeiro tive a honra de conceder mais uma entrevista para o jornal A Tribuna - vendido no Espírito Santo, meu estado natal - sobre mercado de trabalho na área de TI. A reportagem...

Readmore

Manipulando arquivos XML em Java com a API SAX - Parte... O padrão SAX cresceu a partir do método DOM, que era muito complexo e inadequado para várias aplicações. Além disso, até então, cada parser XML para Java tinha seu próprio padrão de interface....

Readmore

Manipulando arquivos XML em Java com a API DOM - Parte... A interface DOM DOM é uma interface de programação, baseada no modelo de objetos, que permite a manipulação e transformação de documentos em XML. A interface DOM manipula documentos XML na forma...

Readmore

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...

Readmore

Como Montar um Grid utilizando Ext JS + Json + Spring

Posted by Loiane | Posted in Ext JS, Spring, java, json, tutorial | Posted on 17-07-2009

3

Este post tem como objetivo mostrar como construir um grid em Ext JS utilizando JSON + Spring.

Relembrando, 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 tecnologias em apenas um projeto. Para isso, vou transformar o projeto do post Como Montar um Grid utilizando Ext JS + Json + Java para que o grid do Ext JS obtenha as informações de um controller do Spring, e não mais de um arquivo jsp (que continha apenas um objeto JSON).

O primeiro passo é construir os arquivos XML de configuração do Spring, lembrando de acrescentar o viewResolver do JSON para integração do mesmo com o framework (e criar o arquivo views.xml):

springmvc-servlet.xml:

spring_json_extjs_01

views.xml:

spring_json_extjs_02

Como já temos as classes Contato.java (POJO) e GerenciaContatos.java do projeto anterior, vamos reaproveitá-las. Será preciso apenas criar o ContatoController.java (e descartar a classe ContatoJSON.java):

spring_json_extjs_03

Observe que não precisamos mais transformar o objeto Java para o formato JSON. O json-lib-ext-spring já faz isso. E acrescentando a linha ModelAndView (“jsonView”, modelMap);, já fica explícito que o objeto do tipo HashMap será transformado para JSON.

Uma última mudança é preciso. Antes, o data.Store obtinha os dados através da página contatojson.jsp. Agora, vamos obter os dados diretamente do controller:

spring_json_extjs_04

Pronto!

Conclusão:

As mudanças que foram feitas são simples, fáceis e rápidas de fazer, além de deixar o projeto mais bonito!
E também serve como exemplo de como trabalhar com JSON juntamente com Spring!

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

download

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

Até a próxima!

:)

  • Share/Bookmark

Posts Similares

Comments (3)

[...] pegar como base, o último projeto aqui do blog. A partir dele, vou fazer algumas [...]

Olá!!!

Primeiramente quero parabenizar pelos artigos, são muito bons e de temas que não encontramos facilmnete na net…

Estou utilizando em minha aplicação o seu exemplo sobre Ext JS + Json + Spring, porém quando retorno a view do json no meu controller somente são exibidos os dados em formato json. Como faço para exibí-los como grid?

Desde já agradeço,

Gisele

Ei Gisele,
Em primeiro lugar, obrigada!

Você precisa implementar um reader(leitor) para interpretar o seu retorno json.
Dê uma olhada no código do dataStore do grid do Extjs aqui no post. Se quiser um tutorial mais passo a passo, dê uma olhada nos primeiros tutoriais sobre extjs datagrid aqui no blog.

Abraços

Write a comment