Exemplo Ext JS 4: Mapa Múndi em SVG

04/12/2013 | By | 4 Comments

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! icon smile Exemplo Ext JS 4: Mapa Múndi em SVG

Segue o screenshot do mapa:

extjs worldmap svg loiane Exemplo Ext JS 4: Mapa Múndi em SVGVocê 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! icon smile Exemplo Ext JS 4: Mapa Múndi em SVG

Filed in: Ext JS 4, Sencha Architect 2 | Tags: , , ,

Comments (4)

  1. jeronimo

    Olá sei que essa pergunta não tem nada haver com o post, mas estou precisando muito e não acho a solução, talvez vc saiba e posso me ajudar.

    Estou usando o phonegap e não estou conseguindo fazer o vibrate funcionar, já coloquei as permissões no res/xml/config.xml e no AndroidManifest.xml e o codigo do vibrate no index.html, mas não funciona e tb não da erro, só não vibra. Você tem alguma ideia do que pode ser?

    • Oi Jeronimo,
      Quando vc gera a app com o phonegap as permissões já estão nos arquivos de config automaticamente.
      Algumas funcionalidades podem não funcionar no emulador. Já testou em um aparelho real?
      []‘s

      • jeronimo mariano

        Olá, obrigado por responder, mas era permissão mesmo, é que no guia do phonegap pede para colocar a permissão no config.xml, mas não explica qual config.xml, sendo que há dois deles no projeto. Dai lendo o doc do build phonegap eu vi um exemplo mostrando qual era o config.xml, mas muito obrigado mesmo, vc foi a unica que me responder, precisando tb só falar.

        • Ah, então vc está usando o phonegap build e não o phonegap! Aí é manual mesmo!
          Se gerar a app com o CLI do phonegap não precisa fazer nada manual! :)

Deixe um comentário