Sencha – Um pouco sobre Ext JS 6

Olá meus amigos, neste artigo darei continuidade ao post anterior que falei um pouco do que estava por vim no Ext JS 6 GA.

Alguns dias se passaram e o tão esperado e prometido “July First” chegou, e com algumas novidades.

Vamos lá citar algumas, começando da minha preferida. (O Template Admin Dashboard)

 

Admin Dashboard (SenchaDash)

app-template

Provavelmente já devem ter percebido o quanto vem ganhando espaço aplicações com dashboards administrativos feitas em Bootstrap e AngularJS e/ou outros frameworks.  Eu particularmente adoro esse tipo de layout, com gráficos, “cards”, painéis informativos na home da aplicação, animações e muito mais, deixando-a mais rica e atrativa.

Foi introduzido um novo diretório chamado “templates” onde teremos exemplos de aplicações, e nele temos o surpreso e elegante admin-dashboard, mostrando que com Ext JS também faz apps “bonitinhas” de forma descomplicadas e ainda SPA  usando Routing (sem reload pra cada tela que você visita) demais não?.

São poucas apps feitas em Ext JS que tenho visto, que tem um layout moderno e descaracteristico dos temas padrões. A maioria usando temas básicos como Crisp, Neptune e até o Classic. Mas Ext JS não é essa caixa fechada que muitos pensam, basta ter um pouquinho de criatividade e inspiração, que com apenas CSS, Xtemplate e HTML  estilizados em alguns containers que podemos deixar apps mais vivas e modernas.

Para conhecer o novo template de aplicação acesse o exemplo online aqui.

Se você quer mais inspirações para criar seus próprios templates recomendo o site wrapbootstrap confira a quantidade de exemplos aqui

Novo componente TreeList

treelist

Não aguenta mais ficar expandindo e encolhendo seu “west panel” para acessar o menu feito com a treepanel básica?

Extendido da classe TreePanel, foi lançado o TreeList, o mais novo componente para criação de menus de navegação.

Agora podemos criar menus modernos, e que ocupam pouco espaço na tela através de configurações que o deixa flutuante.

Confira o exemplo aqui

Novo tema Triton

Existe um novo tema chamado Triton, flat  e minimalistico  usando icon fonts FontAwesome ao invés de imagens png ( panel tools, tree icons, form field triggers, button arrows, checkboxes, radio buttons, grid action icons, grid column, slider thumbs, box e border splitters, toolbar overflow indicators)

O tema está disponível tanto para a toolkit classic quanto para modern.

Layout Responsivo em  Colunas

A toolkit classic recebe um novo tipo de layout chamado responsivecolumn  que permite componentes serem ajustados automaticamente conforme o espaço disponível na tela.

Usando esse tipo de layout em conjunto com o plugin responsive, tamo forte na parada.  (Agora sim podemos dizer responsivo).

Veja o exemplo.

O responsivelayout entrará em ação adicionando essas classes CSS

Isso fará que os componentes ficam organizados, visíveis e sem barra de rolagem horizontal.

Para ver em ação, abra o exemplo admin-dashboard em telas/ou janela do navegador menor que 800px, verás a mágica na organização dos componentes.

Propriedade de configuração defaultButton

Muita das vezes, nos formulários queremos que ao pressionar ENTER, seja disparado o click de algum botão principal da tela, e a solução sempre foi ficar monitorando eventos keydown, keypress no form para submitar o form. Agora não precisa mais disso, basta adicionar a proprieadade de configuração defaultButton no seu panel e passar a referencia do button principal e pronto. Acesse o fiddle para ver na prática.

Criação de temas e UI

Criar temas está cada vez mais descomplicado. Foi dado maior atenção no sistema de temas após a chegada do Triton.

Temas estão separados por pacotes e também foi melhorado  o mixin de criar ui  começando com os buttons, que conta com várias opções de configurações.

Apartir de agora, para criar ui para button, você precisará passar apenas o que deseja mudar.

veja como ficou

Com isso será gerado apenas o seguinte CSS

Pode também adicionar múltiplos nomes de ui para combinar seus ajustes, veja:

 

Novos produtos

Sencha Inspector

JetBrains IDE plugin

Sencha Web Aplication Manager

 

Links úteis

Anúncio Oficial no Blog

Download direto versão GPL

 

Documentação e API

Tudo isso agora é de “grátis” né Januario?

KKKKK, continue ai sentadinho que vou ali tomar uma café, e já te explico.

Não é grátis não meu companheiro e companheira,

Ext Js 6 está aproximadamente 20% mais caro do que as versões anteriores do framework. Essa decisão está gerando discussões, aborrecimentos e atá abandono de muitos. Muitos dos usuários trabalham em grandes empresas, e a capacidade de desenvolvimento e retorno é maior que o custo do investimento segundo o CEO da Sencha.

A versão Standard custa a partir de $4,340. As versões Pro e Premium custam a partir de $5,650 até $7,350 até Setembro/2015. Depois disso companheiro, a “facada” vai atravessar pro outro lado, variando de $6,280 a $9,190.

Está duvidando?

Pode acreditar.

Conclusão

É isso ai pessoal, vamos torcer pra economia do pais melhorar, pra Sencha ter motivos pra reduzir os preços(Concorrência)  ou criar licenças “single developer” , e enquanto isso se quiser ficar no mesmo barco deles de “grátis”, só se for de GPL.

Um grande abraço!

 

 

 

Siga-me

Wemerson Januario

Engenheiro de Software em In Line Tecnologia
[PT-BR] Wemerson Januarioé empreendedor, escritor, instrutor e consultor. Atua no desenvolvimento web e soluções tecnológicas desde 2005. Apaixonado pelo que faz. Responsável pela administração do fórum ExtJS Brasil e mantem o team Slack sencha-br. Especializado em criação de aplicações multi plataformas usando tecnologias modernas em JavaScript(Ext JS) e PHP (Laravel framework).

[EN] Wemerson Januario is an entrepreneur, writer, trainer and consultant. Works in web development and technology solutions since 2005. Passionate about what he does. Administrator of Ext JS Brazil forum and keeps the Slack team sencha-br . Specializes in creating multi-platforms applications using modern technologies in JavaScript(Ext JS) and PHP (Laravel framework).
Siga-me

Últimos posts por Wemerson Januario (exibir todos)

You may also like...

  • Legolas

    Excelentes primeiras impressões Wemerson, essa questão de layout mais de portal é o que mais vemos de aplicações fora a questão de ser responsivo.
    Essas novas features como a questão do handler padrão já diminui alguns códigos nas nossas aplicações, ainda não cheguei a ver a implementação, mas de pois irei olhar, pois vai que eles fizeram algo parecido com que já usamos.
    No mais parabéns pelo posto meu cara e muito obrigado pela atualização.

    Abraços.

    • http://wemersonjanuario.com.br Wemerson Januario

      Obrigado abraços!

  • Alexandre Cyro Pereira

    Valeu pelo review. Aguardando novas impressoes

    • http://wemersonjanuario.com.br Wemerson Januario

      Obrigado.

  • Edison Bortolin

    Olá Wemerson,

    Você já conseguiu criar um App (sencha cmd) com base no exemplo do admin-dashboard?

    Parabéns pelo post! Abraço

    • http://wemersonjanuario.com.br Wemerson Januario

      Olá Edilson. Já consegui sim, estamos e beta na nossa app. Minha app já está sendo atualizada pra versão 6 e usando justamente o template admin-dasboard como base. com algumas customizações.

      Obrigado.