Dominando Sencha Ext JS 7

Saiba como definir classes e criar objetos além de conhecer os atributos reservados da classe abstrata Ext.Class

Aprenda como funciona o ecosistema de herança de classes no Ext JS

Conheça o poderoso sistema de herança horizontal e dê capacidades adicionais para suas classes através de mixins

Crie atributos configuraveis e expanda as capacidades com setter, getter, applier e updater

Saiba como definir classes com instancias únicas e propriedades estáticas através de singleton e statics

Conheça como funciona o carregamento automático e resolva dependencias de suas classes através da propriedade requires

Conheça o grande pacote de classes utilitárias que o framework possui e torne o desenvolvimento de apps ainda mais profissional e completo

Entenda o completo sistema de layouts disponível no framework, e seja capaz de construir telas bem elaboradas e leves aplicando o tipo de layout adequado para posicionamento de componentes.

Anchor é um layout que permite a ancoragem de elementos contidos em relação às dimensões do contêiner. Se o contêiner for redimensionado, todos os itens ancorados serão renderizados automaticamente de acordo com suas regras de ancoragem.  Aprenda também como reproduzir o mesmo conceito de layout na toolkit modern.

Absolute é um layout que herda a ancoragem do layout Anchor e adiciona a capacidade de posicionamento x / y usando as opções de configuração de componente x e y padrão. Aprenda também como reproduzir o mesmo conceito de layout na toolkit modern.

Fit é um gerenciador de layout base para layouts que contêm um único item que se expande automaticamente para preencher o contêiner do layout.

Center é um gerenciador de layout usado para centralizar o conteúdo em um contêiner. Como uma subclasse de Fit, CenterLayout espera ter um item filho

Este é um layout que gerencia vários painéis em um estilo de acordeão expansível, de modo que, por padrão, apenas um painel pode ser expandido a qualquer momento. Cada painel possui suporte integrado para expansão e recolhimento.

Este é um estilo de layout de IU orientado a aplicativos, com vários painéis, que oferece suporte a vários painéis aninhados, barras automáticas entre regiões e expansão e recolhimento integrado de regiões. Aprenda também como reproduzir o mesmo conceito de layout na toolkit modern.

Este layout gerencia vários componentes filho, cada um ajustado ao contêiner, onde apenas um único componente filho pode ser visível a qualquer momento. Este estilo de layout é mais comumente usado para assistentes, implementações de guias, etc.

Este é um layout que renderizará os campos do formulário, um abaixo do outro, todos alongados na largura do Container.

Um layout que organiza os itens horizontalmente em um contêiner. Esse layout opcionalmente divide o espaço horizontal disponível entre os itens filhos que contêm uma configuração numérica flexível.

Um layout que organiza os itens verticalmente em um contêiner. Esse layout opcionalmente divide o espaço vertical disponível entre os itens filhos que contêm uma configuração numérica flexível.

O pacote de dados é o que carrega e salva todos os dados em seu aplicativo. Consiste em uma infinidade de classes, mas há três que são mais importantes do que todas as outras. Essas classes são: Model, Store, Proxy

A peça central do pacote de dados é Ext.data.Model. Um modelo representa uma entidade em um aplicativo. Por exemplo, um aplicativo de comércio eletrônico pode ter modelos para usuários, produtos e pedidos. No nível mais simples, um modelo define um conjunto de campos e lógica de negócios relacionada.

Aprenda a aplicar e centralizar toda validação de dados em Models com o grande suporte a Validators.

Aprenda como fazer associações entre relacionamento de Models de uma forma simples e eficiente.

Aprenda como carregar dados no Model, alterar e como salvar as alterações usando a configuração do Proxy dentro do Model.

Aprenda como deixar a comunicaçao entre client e server mais simples e profissional com o Proxy REST. O proxy Rest é uma especialização do Ext.data.proxy.Ajax que simplesmente mapeia as quatro ações (criar, ler, atualizar e destruir) para verbos HTTP RESTful.

AjaxProxy é uma das formas mais amplamente utilizadas de colocar dados em seu aplicativo. Ele usa requests AJAX para carregar e salvar dados do servidor, geralmente para serem colocados em um Ext.data.Store.

A classe Store encapsula um cache do lado do cliente de objetos Ext.data.Model. Armazena dados e carrega por meio de um Proxy e também fornece funções para classificar, filtrar e consultar as instâncias Ext.data.Model contidas nele.

Entenda e veja na prática como realizar a classificação, filtragem local e remotamente de dados no Store.

Domine de forma simplificada a gestão de dados em um Store. Aprenda a sicronizar dados de um store processando todas as operaçoes CRUD.

Aprenda como comunicar com um servidor remoto através da classe Ext.Ajax.

Os componentes e classes do Ext JS disparam uma ampla gama de eventos em vários pontos de seu ciclo de vida. Os eventos permitem que seu código reaja às mudanças em seu aplicativo. Eles são um conceito chave no Ext JS.

Mergulhe profundamente nas opcões de configurações do sistema de eventos do framework.

Saiba quem é o responsável por toda mágia do sistema de eventos no framework.

Esteja pronto para criar aplicações ricas e bem estilizadas com o mais completo kit de componentes para desenvolvimento web do mercado

Entenda na prática os principais containers do framework e suas capacidades, e faça o uso adequado de cada um deles.

Conheça o completo pacote de campos de entrada e crie formulários ricos e bem acomodados para sua aplicação.

Exibir dados em tabela nunca foi tão fácil com o Grid Panel do Ext JS. Conheça o mais completo componente para exibição de dados tabulares do mercado.

Aprenda configurar suas colunas, com congelamento, agrupamento, ordenação e muito mais no Grid Panel.

Deixe suas listagens bem formatadas e estilizadas condicionalmente, com as várias opções de formatação e renderização de células.

Melhore a usabilidade de um Grid Panel habilitando ou restringindo seleções de celulas, linhas e colunas através de um modelo de seleção.

Enriqueça a experiência com o usuário editando dados na própria Grid com os plugins encorporados no framework.

Aprenda e mostrar dados totalizados com agregadores de soma, média, contagem e muito mais no Grid Panel com o plugin Summary

Saiba como paginar dados de forma simples e moderna nas listagens e grid com os plugins listPaging e PagingToolbar. Adicione um botão "Carregar Mais" na parte inferior da lista. Quando o usuário pressiona este botão, a próxima página de dados será carregada no armazenamento e anexada à lista.

Tudo que você precisa para deixar suas Grids empoderadas e completas com o poderoso plugin para filtragem de dados. Este plugin habilita filtros definidos pelo usuário em uma Grid

O plugin Row Expander fornece uma coluna "expansora" para dar ao usuário a capacidade de mostrar ou ocultar o corpo de cada linha.

Nem toda listagem de dados deve ser em tabelas, O DataView facilita a renderização de um ou mais itens de dados, normalmente de servidor remoto ou qualquer outra fonte de dados. O DataView é o que alimenta componentes mais poderosos como List e Grid.

O TreeGrid fornece uma representação de interface estruturada em árvore de dados em hierarquia.

Conheça tudo sobre Toolbars e botões

Painéis em abas são uma ótima maneira de permitir ao usuário alternar entre várias páginas que estão todas em tela inteira. Cada componente no painel de abas obtém sua própria guia, que mostra o componente quando tocado.

O componente Pivot Grid permite um rápido resumo de grandes conjuntos de dados. Ele fornece uma maneira simples de condensar muitos pontos de dados em um formato que torna as tendências e os insights mais aparentes.

O calendário Ext JS é um novo componente poderoso que permite aos usuários incorporar seus dados de data e evento para criar calendários personalizados impressionantes. O calendário utiliza uma filosofia de design minimalista para que possa ser estendido para atender a quaisquer requisitos.

O pacote Exporter permite a exportação de dados para vários formatos de arquivo. Suporta formatos nativos XSLX, Excel XML, bem como HTML e CSV / TSV (valores separados por vírgula / tabulação).

ExtJS 7.x tem um pacote de código Premium para a toolkit modern. O pacote permite que você use o editor Froala WYSIWYG em seus aplicativos.

Apresentar dados de forma clara e atraente é um trabalho importante para qualquer aplicação. D3 é uma escolha extremamente popular para visualização de dados. O novo pacote d3 torna mais simples do que nunca integrar o D3 em seu aplicativo Ext JS.

O pacote Chart consiste em uma hierarquia de classes que fornecem funcionalidade de visualização de dados e gráficos. Isso inclui séries, eixos, interações e mecanismos para implementar marcadores e legendas.

Conheça os tipos de eixos, series e interações disponiveis no pacote charts.

Aprenda na prática a criar gráficos cartesianos e polares com customizações e dados reais.

Cria gráficos mais atraentes com o mecanismo de temas para gráficos.

A principal diferença entre MVC e MVVM é que o MVVM apresenta uma abstração de uma visualização chamada ViewModel. O ViewModel coordena as mudanças entre os dados de um Model e a apresentação desses dados por meio de uma técnica chamada "vinculação de dados".

Ext JS oferece algumas melhorias interessantes para você usar em sua arquitetura de aplicação. Conheceça o ViewControllers para aprimorar os aplicativos MVC. O melhor de tudo é que essas opções não são mutuamente exclusivas, portanto, você pode introduzir esses recursos de forma incremental ou até mesmo combiná-los.

A vinculação de dados e o ViewModel que a alimenta são adições poderosas ao Ext JS.

Juntos, eles permitem que você faça mais com menos código e escreva em um estilo muito mais declarativo, ajudando a manter uma separação clara de interesses.

Em um site normal, um usuário navega de e para páginas diferentes conforme clica em links ou preenche formulários. No entanto, em um aplicativo de página única, a interação de um usuário não carrega uma nova página. Em vez disso, ele é tratado em uma única página e os componentes reagem a essa interação. Então, como você ainda permite que os usuários usem os botões de avançar e voltar do navegador? A resposta é digerir as alterações de hash de URI com o roteador Ext JS.

Conheça o ecosistema de pacotes do Sencha CMD

Os temas padrão disponíveis com Ext JS podem ser usados ​​fora da caixa para criar aplicativos limpos e com aparência profissional. Você pode desejar fornecer seu próprio estilo, no entanto, para combinar com sua estética de design pessoal ou de um design empresarial existente.

Aprenda a criar seu proprio tema com SASS

Crie estilos individuais para componentes dentro do ecosistema de temas do Ext JS

Conheça a ferramenta visual Sencha Themer para criação rápida de temas e prototipagem com Sencha Stencils

Produzir um aplicativo que seja funcional, usável e bonito em todos os dispositivos é o Santo Graal do desenvolvimento de aplicativos. Com Ext JS, você agora tem as ferramentas necessárias para atingir esse objetivo com o mínimo de dificuldade.

Criando o projeto NPM

Veja na prática a criação do viewport inicial da aplicação

Aprenda a criar um menu de navegação simples e funcional

Aplique técnicas de routing na aplicação totalmente ligadas ao menu de navegação

Aprenda a listar dados remotos em uma grid atraves de uma API RESTful

Aprenda a usar o componente de formulário e campos de entredas para cadastro de fornecedor

Aprenda a persistir um model usando MVVM

Aprenda a excluir um ou mais registros de um Store

Crie um CRUD completo usando Grid editável

Liste as contas a pagar consumindo uma API RESTful

Crie um formulário bem planejado dando melhor experiencia para o usuário

Salvando dados de um Modol usando MVVM

Veja na prática como excluir registros de um store e auto exclusão no Model

Veja na prática como usar o componente premiun Grid Exporter para exportação de dados para Excel

Tornando aplicação Universal com profiles Desktop e Phone

Aprendar a usar o componente List para listagem de contas a pagar

Aplique gráficos reais no dashboard da aplicação