Exemplo ExtJS 4 Web Desktop: MVC e Sencha Architect 3!

26/11/2013 | By | 10 Comments

Oi Pessoal!

Perdi a conta de quantos pedidos recebi para portar o exemplo do Web Desktop do ExtJS para MVC e Architect 3! Demorou, mas o exemplo saiu. Já portei o exemplo para o Sencha Architect 3 (mas se você não usa não tem problema, pois o código será o mesmo!) e também para MVC (aí que muita gente se embola e tenta passar a própria user extension da Sencha para MVC, mas apenas o seu projeto precisa ficar em MVC! #FicaADica).

extjs desktop mvc architect Exemplo ExtJS 4 Web Desktop: MVC e Sencha Architect 3!

Simplifiquei e tirei algumas coisas, ainda preciso fazer mais algumas modificações, mas o exemplo está funcionando ok. Dá até pra fazer o build do Ext JS para produção com ele (aquele otimizado e ofuscado)! icon smile Exemplo ExtJS 4 Web Desktop: MVC e Sencha Architect 3!

O exemplo foi feito usando a última versão do ExtJS até esse momento (4.2.1) e Sencha Architect 3. Se quiser testar, basta baixar ou clonar o projeto, colocar num web server e rodar!

Para quem se interessar: https://github.com/loiane/sencha-extjs4-examples-architect/tree/master/ExtJS4DesktopMVC

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

Comments (10)

  1. Cezar

    Loiane, vi que no seu exemplo você ainda utilizou partes do js que já existia, na pasta desktop

    Seria muito difícil e trabalhoso fazer isso usando uma estrutura 100 % mvc e ter apenas uma viewport ?
    Assim todos aqueles arquivos iniciais, poderiam estar em uma view Home
    Sei lá se estou falando bobeira também hehehe
    Bom trabalho mesmo assim

    • Aqueles arquivos são UX, às vezes chamados de extensões e plugins. Essa parte vc não coloca em MVC – a não ser que queira fazer sua própria UX, mas aí fica bem mais complicado de usar – até hoje não vi ninguém da comunidade distribuir assim. Esses arquivos são assim justamente para ser fácil de ser usado em qualquer projeto.
      Apenas o seu projeto – os seus arquivos vc trabalha em MVC – as UX vc apenas pluga no seu projeto – vc não transforma em MVC pois não faz sentido. :)
      E na hora de fazer o build de produção, serão obfuscados e otimizados do mesmo jeito que o resto do seu projeto.
      []‘s

  2. Olá, Loiane! Tudo bem? :-)

    Gostaria de fazer uma pequena aplicação desktop, que teria uma única tabela de banco de dados e um componente ao estilo TreeView.

    No entanto, estou com dificuldades para escolher a tecnologia.

    De início, pensei em fazer em Java Swing, mas tive um pouco de dificuldade e pensei que eu desenvolveria tudo mais rápido se tivesse alguma maneira de fazer em web.

    Aí pensei em usar HTML5 e CSS com SQLite, mas achei poucos exemplos com o TideSDK.

    Qual tecnologia você recomenda hoje em dia?

    PS: Não tenho intenção de fazer minha aplicação para web por que não quero lidar com contas de usuário, por isso quero fazer algo mais simples. :-)

    Obrigado!

    • Oi Rafael,

      Então, depende muito da sua aplicação. Se quiser fazer uma app híbrida, vc pode fazer com tide sdk, app.js, entre outras alternativas.
      O problema é que para fazer acesso ao sqlite é necessário um código servidor (Java,php, etc). Ah não ser que vc esteja falando do web sql do browser mesmo que tem apenas 5mb de espaço, aí dá pra fazer usado apenas html, js e CSS.
      Do jeito que vc está falando e pelo que entendi da sua aplicação, pessoalmente iria de Java mesmo, pois é o que eu sei programar tb!
      Vc já deu uma olhada no Java fx? É o sucessor do swing e tem uma interface bem mais bonita.

      []‘s

  3. Marcio

    Loiane, como sempre ótimos artigos, já assisti muitos dos seus cursos de extjs, mas ainda não consegui implementar um menu dinâmico em mvc neste Web desktop, , a parte do servidor retornar um json eu consigo. Mas onde coloco a chamada do json, do menu por exemplo?

    • Oi Marcio,
      Não tenho o exemplo de menu dinâmico para esse caso pronto. Teria que debugar a app para ver como o extjs faz o load das opções, já que o webdesktop é uma extensão da Sencha, não é convencional como começar uma app do zero normalmente.

  4. Marcos

    Olá, ótimo exemplo, gostaria de saber como carregar o menu com o mesmo esquema (dinâmico), por um json por exemplo, e carregar páginas com iframe.

    • Oi Marcos,
      Não tenho o exemplo de menu dinâmico para esse caso pronto. Teria que debugar a app para ver como o extjs faz o load das opções, já que o webdesktop é uma extensão da Sencha, não é convencional como começar uma app do zero normalmente.
      Extjs não foi feito para usar iFrame, já que usa o conceito de single page application.
      []‘s

Deixe um comentário