Exemplo Ext JS 4: Mapa Múndi em SVG

Oi pessoal,

Hoje vou mostrar um exemplo diferente para vocês com Ext JS 4. É um mapa-múndi feito com SVG e que funciona em todos os browsers (incluindo as versões mais novas do IE > 8).

A gente sempre pensa que Ext JS é para aplicações do tipo CRUD, e recentemente tive a oportunidade de trabalhar em uma app muito legal e precisei fazer uma tela parecida com essa do exemplo (tinham mais frescuras, essa do exemplo é bem simples, apenas o desenho mesmo). E fico feliz por saber que aplicações assim tem mercado e são usadas por usuários! :)

Segue o screenshot do mapa:

extjs-worldmap-svg-loianeVocê pode redimensionar o browser para qualquer tamanho que o mapa se adapta - isso é muito legal!

E é claro que não sou tão criativa assim para criar todos os paths do SVG né? rs - No index.html precisa adicionar esse arquivo aqui que já tem todos os caminhos do SVG prontos (é do exemplo do Raphael.js, também da Sencha).

Com a variável worldmap na memória, basta criar o componente Ext JS:

Fiz esse exemplo no Sencha Architect também, quem se interessar pelo código completo está aqui: https://github.com/loiane/sencha-extjs4-examples-architect/tree/master/extras/worldmapArchitect

Até a próxima! :)