Ext.js - perguntas e respostas

Ext JS significa JavaScript estendido. É uma estrutura JavaScript para desenvolver aplicativos de desktop baseados na Web de UI ricos.

É um produto Sencha estendido do YUI (interface de usuário do Yahoo).

Estes são os principais arquivos a serem incluídos na página HTML para executar o código Ext JS -

• Ext-all.js
• Ext-all.css

• Widgets de IU personalizáveis ​​com coleção de IU rica, como grades, grades pivot, formulários, gráficos, árvores.
• Compatibilidade de código de novas versões com a mais antiga.
• Um gerenciador de layout flexível ajuda a organizar a exibição de dados e conteúdo em vários navegadores, dispositivos e tamanhos de tela.
• O pacote de dados Advance separa os widgets de IU da camada de dados. O pacote de dados permite a coleta de dados do lado do cliente usando modelos altamente funcionais que permitem recursos como classificação e filtragem.
• É um protocolo agnóstico e pode acessar dados de qualquer fonte de back-end.
• Temas personalizáveis ​​Os widgets Ext JS estão disponíveis em vários temas prontos para uso que são consistentes em todas as plataformas.

• Otimiza o desenvolvimento de plataforma cruzada em desktops, tablets e smartphones - para navegadores modernos e legados.

• Aumenta a produtividade das equipes de desenvolvimento integrando-se a ambientes de desenvolvimento corporativo por meio de plug-ins IDE.

• Reduz o custo de desenvolvimento de aplicativos da web.

• Capacita as equipes a criar aplicativos com uma experiência de usuário atraente.

• Ele possui um conjunto de widgets para tornar a IU poderosa e fácil.

• Ele segue a arquitetura MVC com um código altamente legível.

• O tamanho da biblioteca é grande em torno de 500 KB, o que torna o tempo de carregamento inicial maior e torna o aplicativo lento.

• O HTML está cheio de tags <DIV>, o que o torna complexo e difícil de depurar.

• De acordo com a política geral de licença pública, é gratuito para aplicativos de código aberto, mas pago para aplicativos comerciais.

• Algumas vezes, para carregar até coisas simples, são necessárias poucas linhas de código, o que é mais simples em html ou Jquery.

• Necessita de um desenvolvedor bastante experiente para o desenvolvimento de aplicações Ext JS.

Ext JS suporta compatibilidade cruzada de navegadores, suporta todos os principais navegadores como -

• IE 6 e superior
• Firefox 3.6 e superior
• Chrome10 e superior
• Safari 4 e superior
• Opera 11 e superior

Ext JS 4+ oferece suporte à arquitetura MVC (controlador de visualização de modelo). A partir de Ext JS 5, também passou a oferecer suporte a MVVM (Model View Viewmodel).

Ext JS 6 é a versão mais recente do Ext JS, que tem o grande benefício de poder ser usado tanto para desktop quanto para aplicativos móveis. Basicamente, é uma fusão de Ext JS (aplicativos de desktop) e Sencha touch (aplicativo móvel).

Ext JS é uma estrutura JavaScript, portanto, para começar a usá-la, você deve ter conhecimento prévio de HTML e JS (não é um nível de especialista, mas deve ter um conhecimento básico). Então, é preciso entender o básico, então dê tempo e aprenda gradualmente.

Ambos os frameworks são bastante diferentes, podemos comparar Ext JS e jQuery UI, pois Ext JS é um framework rico em UI completo. Mas Ext JS ainda tem muito mais componentes do que a UI do jQuery.

Ext JS 1.1

A primeira versão do Ext JS foi desenvolvida por Jack Slocum em 2006. Era um conjunto de classes utilitárias que é uma extensão do YUI. Ele chamou a biblioteca de YUI-ext.

Ext JS 2.0

Ext JS versão 2.0 foi lançado em 2007. Esta versão tinha nova documentação de API para aplicativos de desktop com recursos limitados. Esta versão não tinha compatibilidade com versões anteriores do Ext JS.

Ext JS 3.0

Ext JS versão 3.0 foi lançada em 2009. Esta versão adicionou novos recursos como gráfico e exibição de lista, mas à custa de velocidade. Tinha compatibilidade retroativa com a versão 2.0.

Ext JS 4.0

Após o lançamento do Ext JS 3, os desenvolvedores do Ext JS tiveram o maior desafio de aumentar a velocidade. Ext JS versão 4.0 foi lançado em 2011. Ele tinha a estrutura revisada completa que seguiu pela arquitetura MVC e um aplicativo rápido.

Ext JS 5.0

Ext JS versão 5.0 foi lançado em 2014. A principal mudança neste lançamento foi mudar a arquitetura MVC para a arquitetura MVVM. Inclui a capacidade de construir aplicativos de desktop em dispositivos habilitados para toque, vinculação de dados bidirecional, layouts responsivos e muitos outros recursos.

Ext JS 6.0

Ext JS 6 mescla a estrutura Ext JS (para aplicativos de desktop) e sencha touch (para aplicativos móveis).

Ext JS tem vários componentes de IU, alguns dos componentes mais usados ​​são -

• Grid
• Form
• Caixa de mensagem
• Barra de progresso
• Dica de ferramenta
• Window
• Editor de HTML
• Charts

xType define o tipo de componente Ext JS UI, que é determinado durante a renderização do componente. Por exemplo, textField, Numeric, button etc.

Este é o tipo de validação que pode ser personalizado facilmente. Poucos vType fornecidos por Ext JS são -

alphanumText - Retorna falso se o texto inserido tiver qualquer símbolo diferente de alfabético ou valor numérico.

emailText - Retorna falso, se o texto não for um endereço de e-mail válido.

Sim Ext JS pode ser integrado com Ajax. Implementação como: suponha que em alguma caixa de texto após o desfoque ela tenha que validar os dados do servidor para que possamos ter uma chamada Ajax onblur / onchange para o id da caixa de texto para verificar se os dados inseridos na caixa de texto estão presentes no servidor / banco de dados .

Sim Ext JS pode ser integrado com outra estrutura do lado do servidor, como Java, .net, Ruby on Rails, PHP, ColdFusion etc.

Ext JS pode ser implementado em qualquer ambiente de desenvolvimento integrado (IDE) popular, como Eclipse, Aptana, Sublime, Webstrom etc.

Estas são algumas maneiras de acessar elementos DOM em Ext JS -

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

Arquitetura MVVM é Model View Viewmodel. Na arquitetura MVVM, o controlador de MVC é substituído por ViewModel.

ViewModel- É basicamente medicar as mudanças entre visão e modelo. Ele vincula os dados do modelo à visualização. Ao mesmo tempo, ele não tem nenhuma interação direta com a visão, mas apenas o conhecimento do modelo.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () é o primeiro método que é chamado quando o DOM é totalmente carregado para que qualquer elemento que você deseja referir esteja disponível quando o script for executado.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Diferentes tipos de caixas de alerta em Ext JS são -

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

As classes base para Store são Ext.data.Store

Para o modelo é Ext.data.Model

Para controlador é Ext.app.controller

Estas são as diferentes formas de tratamento de eventos -

• Usando Ouvintes
• Anexar eventos mais tarde
• Usando eventos personalizados

Store.getCount() - Para registros em cache

Store.getTotalCount() - Para nº total de registros no BD.

O método Store.getModifiedRecords () é usado para obter registros modificados.

Método Store.commitChanges () para atualizar as mudanças na loja.

Se tivermos o Id da grade: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Se tivermos o ID da loja: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

• Classe base para Grid - Ext.grid.GridPanel
• Para formulário - Ext.form.Panel
• Para painel - Ext.panel.Panel
• Para gráfico - Ext.chart.Chart
• Para árvore - Ext.tree.Panel

Diferentes tipos de layouts são -

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

Isso pode ser feito usando pagingToolbar () como -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Loadmask é usado para evitar qualquer outra operação, mostrando o carregamento (ou mensagem personalizada) ao usuário até que os dados sejam renderizados na grade. Loadmask: true; é a propriedade que mostra a máscara de carga enquanto os dados são renderizados na grade.

O renderizador é usado quando queremos manipular os dados que obtemos da loja para mostrar os dados manipulados com base em alguns critérios. É uma propriedade de coluna que pode ser usada como -

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Oculto: verdadeiro;

Classificável: verdadeiro; que é o padrão verdadeiro.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 tem pacote de kit de ferramentas com o qual pode incluir elementos visuais de ambas as estruturas (Ext JS e Sencha Touch).

Pode ser adicionado como -

'kit de ferramentas': 'clássico', // ou 'moderno'

Se o kit de ferramentas for clássico, ele incluirá a estrutura de aplicativo de desktop Ext JS.

E se o kit de ferramentas for moderno, ele inclui a estrutura de aplicativo móvel sencha touch.