A instalação do EXT é muito simples.
Acesse: http://www.extjs.com/products/extjs/download.php e clique em Download no item “Ext JS 2.1 SDK“. Talvez a versão atual do EXT seja diferente da 2.1, mas o processo de instalação será bastante semelhante. Após clicar no link Download, surgirá um arquivo no formato ZIP para download.
Após realizar o download, descompacte o arquivo em um diretório qualquer e verifique o seu conteúdo. Iremos encontrar as seguintes pastas:
- Adapter: Contém arquivos em JavaScript para que o Ext possa se adaptar a outros scripts tais como jQuery ou Prototype.
- Examples: contém exemplos de todos os componentes do Ext.
- Source: Contém o código fonte de todos os componentes do Ext.
- Air: Contém scripts para que o Ext possa interagir com o Adobe Air
- Docs: Contém a documentação do EXT
Além destas pastas, também encontramos os seguintes arquivos:
- ext-all-debug.js: Contém todos os componentes do EXT. Este arquivo possui a mesma funcionalidade do arquivo ext-all.js, exceto por ser legível para nós humanos. Este arquivo será usado durante a fase de desenvolvimento de nossas aplicações, pois poderemos debugar os scripts com muita facilidade. Quando nossa aplicação for distribuída (fase de produção), iremos utilizar o arquivo ext-all.js, que possui as mesmas funcionalidades mas tem quase a metade do tamanho do arquivo de debug. Veja:
– ext-all-debug.js: 921 KB
– ext-all.js: 511 KB
- ext-core-debug.js: É o núcleo do Ext e possui as mesmas características do item anterior.
Para verificarmos o sucesso da nossa instalação, acesse a pasta:
examples/samples.html
E verifique se o navegador exibe uma tela conforme abaixo:
Nesta página você poderá verificar diversos exemplos do EXT. Exemplos que necessitam de um servidor (Grids com Ajax, por exemplo) serão vistos nos próximos artigos.
Criando um exemplo
Agora vamos criar o nosso primeiro exemplo! Para que você possa utilizar o Ext, basta saber que você precisa de um arquivo HTML e de que precisa fazer uma referência a 3 arquivos, que são eles:
- ext-all.css Contém as definições de estilo para os controles do EXT
- ext-base.js É uma espécie de base para o EXT. Também podem ser incluídos outros tipos de base com suporte a jQuery e Prototype.
- ext-all-debug.js Contém todos os componentes EXT.
Crie um arquivo na pasta “Examples” com a extensão meuPrimeiroExemplo.html:
Inicialmente inclua o seguinte texto:
Agora iremos incluir os arquivos que o Ext precisa. Veja:
Repare que estamos incluindo um ../ nos arquivos para que podemos subir um nível na estrutura de diretórios do EXT e incluir o arquivo corretamente.
E finalmente incluímos um pequeno código EXT:
O código JavaScript acima possui um método do Ext chamado onReady. Este método somente é executado quando todas as bibliotecas do EXT estão carregadas na página.
Vamos agora mostrar algumas funcionalidades básicas do EXT.Para inserir uma caixa de mensagem mais robusta que o “alert” do JavaScript, podemos utilizar o seguinte código:
Ou seja, estamos usando um componente do Ext chamado MessageBox para que possamos exibir uma mensagem. O resultado do código acima é:
Aumentando um pouco mais nosso código, vamos relacionar uma caixa de mensagem a um clique de um botão. Veja:
No código acima, incluímos um simples botão na tag <body> do nosso documento HTML (1). Em 2, usamos o comando get do Ext para obter a instância do botão na página. Este procedimento é muito utilizado e substitui a necessidade de navegar hierarquicamente entre os controles HTML até encontrar o controle desejado.
Mesmo que o botão estivesse em uma DIV, ou em uma Tabela, o comando em 2 iria obter a instância do botão sem problema algum.
Em 3, utilizando o comando on do EXT para que possamos associar um evento do botão a uma função qualquer. No nosso caso, associamos a função exibirAlerta.
Finalmente, a função exibirAlerta exibe uma simples mensagem no navegador.
O resultado seria:
Resumindo, o EXT até agora foi capaz de:
- Incluir mensagens melhores do que o simples alert do javascript
- Encontrar objetos no documento HTML de forma rápida e fácil
- Associar um evento de um objeto a uma função
Nos próximos artigos veremos muito mais! Aguardem.
Dica: Você pode vasculhar a pasta Examples para verificar como os componentes são manipulados!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?