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

[PT-BR] Wemerson Januarioé proprietário da Novanti Tecnologia especializado em consultoria em produtos Sencha . Atua no desenvolvimento web e soluções tecnológicas desde 2005. Brasileiro reconhecido como MVP (Most Valuable Professional) da Sencha, 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 the owner of Novanti Technologia specializing in Sencha product consulting. He has been involved in web development and technology solutions since 2005. He is a Brazilian recognized as MVP (Most Valuable Professional) of Sencha, responsible for the administration of the Ext JS Brazil forum and maintains the Slack sencha-br. Specialized in creating multi-platform 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.