Ext.js - configuração do ambiente

Configuração de ambiente local

Esta seção o orienta sobre como baixar e configurar Ext JS em sua máquina. Siga as etapas para configurar o ambiente.

Baixando arquivos da biblioteca

Baixe a versão de teste dos arquivos da biblioteca Ext JS do Sencha https://www.sencha.com. Você obterá a versão de teste do site em seu ID de correio registrado, que será uma pasta compactada chamada ext-6.0.1-trial.

Descompacte a pasta e você encontrará vários arquivos JavaScript e CSS, que você incluirá em nosso aplicativo. Incluiremos principalmente os seguintes arquivos -

JavaScript Files - O arquivo JS que você pode encontrar na pasta \ ext-6.0.1-trial \ ext6.0.1 \ build são -

Sr. Não	Descrição do arquivo
1	ext.js Este é o arquivo principal que contém todas as funcionalidades para executar o aplicativo.
2	ext-all.js Este arquivo contém todo o código reduzido sem comentários no arquivo.
3	ext-all-debug.js Esta é a versão não minimizada de ext-all.js para fins de depuração.
4	ext-all-dev.js Este arquivo também não está minimizado e é usado para fins de desenvolvimento, pois contém todos os comentários e logs do console para verificar quaisquer erros / problemas.
5	ext-all.js Este arquivo é usado principalmente para fins de produção, pois é muito menor do que qualquer outro.

Você pode adicionar esses arquivos à pasta JS de seus projetos ou pode fornecer um caminho direto onde o arquivo reside em seu sistema.

CSS Files - Existem vários arquivos baseados em tema, que você pode encontrar na pasta \ ext6.0.1-trial \ ext-6.0.1 \ build \ classic \ theme-classic \ resources \ theme-classic-all.css

Se você for usar um aplicativo de desktop, poderá usar os temas clássicos na pasta \ ext-6.0.1-trial \ ext-6.0.1 \ build \ classic
Se vamos usar um aplicativo móvel, você pode usar temas modernos que podem ser encontrados na pasta \ ext-6.0.1-trial \ ext-6.0.1 \ build \ modern

Os seguintes arquivos de biblioteca serão adicionados em um aplicativo Ext JS.

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "..\ext-6.0.1-trial\ext-6.0.1\build\classic\theme-classic\resources\theme-classic-all.css" />
      <script type = "text/javascript" 
         src = "..\ext-6.0.1-trial\ext-6.0.1\build\ext-all.js" > </script>
      <script type = "text/javascript" src = "app.js" > </script>
   </head>
</html>

Você manterá o código do aplicativo ExtJS no arquivo app.js.

Configuração de CDN

CDN é uma rede de distribuição de conteúdo com a qual você não precisa baixar os arquivos da biblioteca Ext JS; em vez disso, você pode adicionar diretamente o link CDN para ExtJS ao seu programa da seguinte maneira -

<html>
   <head>
      <link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"> </script>
      <script type = "text/javascript" src = "app.js" > </script> 
   </head>
</html>

Editores populares

Por se tratar de um framework JavaScript, utilizado para o desenvolvimento de aplicações web, em nosso projeto teremos arquivos HTML, JS. Para escrever nossos programas Ext JS, precisaremos de um editor de texto. Existem até vários IDEs disponíveis no mercado. Mas, por enquanto, podemos considerar um dos seguintes -

Notepad - Na máquina Windows, você pode usar qualquer editor de texto simples como o Notepad (Recomendado para este tutorial), Notepad ++, sublime.
Eclipse - É um IDE desenvolvido pela comunidade de código aberto eclipse e pode ser baixado de https://www.eclipse.org/.

Navegador

Ext JS suporta compatibilidade entre navegadores e 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

Você pode usar qualquer navegador para executar o aplicativo Ext JS.