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:
Você 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! :)