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)

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

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.

{
    xtype: 'container',
    layout: {
        type: 'responsivecolumn',
        states: {
            small: 800,
            large: 0
        }
    },
    items: [{
        xtype: 'panel',
        responsiveCls: 'large-50 small-100'
    },{
        xtype: 'panel',
        responsiveCls: 'large-50 small-100'
    }]
}

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

.large-100 {
    @include responsivecolumn-item(100%);
}

.large-50 {
    @include responsivecolumn-item(50%);
}

.x-responsivecolumn-small {
    > .small-100 {
        @include responsivecolumn-item(100%);
    }
}

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

{
    xtype: 'button',
    ui: 'rounded'
}

//...

@include button-ui(
    $ui: 'rounded',
    $border-radius: 8px,
    $border-radius-big: 12px  // size when x-big is present
);

Com isso será gerado apenas o seguinte CSS

.x-button-rounded {
    border-radius: 8px;
}
.x-big .x-button-round {
    border-radius: 12px;
}

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

{
    xtype: 'button',
    ui: 'rounded red'
}

//...

@include button-ui(
    $ui: 'red',
    $background-color: red
);

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!