Como Montar um Grid utilizando Ext JS + Json + Spring

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!

:)

Posts Similares

Filed Under: Ext JS 3JavaJSONSpringTutoriais

Tags: , , , , , , ,

About the Author

Bacharel em Ciência da Computação, trabalha como Senior Software Engineer/Tech Leader no Citibank (maior instituição financeira do mundo), em São Paulo. Autora do livro ExtJS 4 First Look, publicado mundialmente pela editora Packt Publishing. Possui um blog em inglês (http://loianegroner.com) e também contribui com artigos em inglês para o Java Lobby do portal DZone. JUG leader do CampinasJUG/Java Campinas, coordenadora do ESJUG e uma das fundadoras do JDuchessBR.

Comments (3)

Trackback URL | Comments RSS Feed

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

  2. Gisele says:

    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

  3. Loiane says:

    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

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.