ExtJS é um framework JavaScript que inicialmente foi desenvolvido para ser uma extensão do framework YUI. Ele era chamado no início de seu desenvolvimento de yui-ext e tinha o YUI como sua base para funcionar, sendo assim, seu funcionamento não era possível sem a utilização do YUI.
Sua distribuição é feita através de duas licenças, uma licença comercial e uma outra licença open-source (código aberto). E além dessas duas licenças, há o serviço de suporte cobrado que poderia estar sendo adquirido individualmente, onde o usuário adquiria o direito não só de suporte através dos fóruns, mas também através de e-mails, telefone, e caso necessário, o usuário poderia adquirir um nível de associação mais alto e ter direito também a suporte via onsite, tendo acesso ao SVN da ExtJS, onde poderia encontrar as versões do ExtJS em desenvolvimento e que ainda não tinham sido liberadas para o público.
O yui-ext, ao longo de seu desenvolvimento, foi recebendo novos adaptadores que servem para fazer a ligação entre ele e outros frameworks JavaScript, tais como, Prototype e jQuery.
O crescimento de suas funcionalidades e componentes de interface, que trouxeram valorização aos frameworks JavaScript mais populares, como YUI, jQuery e Prototype, fez com que fosse rapidamente reconhecido pelos desenvolvedores e colaboradores, gerando maior velocidade para o surgimento de várias versões do yui-ext 0.x., antes de finalmente ser lançada sua versão final 1.0, onde ai sim recebeu a alteração de seu nome para ExtJS. mostrando que ExtJS deixou de ser apenas uma extensão para o framework YUI.
Mas ele veio se tornar realmente um framework depois que a versão 1.1 foi lançada, não sendo mais apenas uma extensão limitada para outro framework, mesmo ainda tendo a possibilidade de ainda ser usado como tal.
A partir desse momento, novas versões continuaram a ser desenvolvidas e com elas vieram novas funções e componentes básicos redesenhados para serem mais eficazes e necessitarem menos linhas de código.
Suporte
O ExtJS atualmente tem suporte pelos navegadores mais populares.
- IE 6 ou superior.
- Firefox 1.5 ou superior.
- Safari 3 ou superior.
- Opera 9 ou superior.
Instalação
Para que possamos usar o ExtJS, precisamos primeiramente realizar o download do mesmo através do seguinte link: http://www.sencha.com/products/extjs/download/ext-js-4.0.7.
Nesta página encontramos duas opções de download: a versão gratuita e a versão comercial.
Figura 1: Página de download do ExtJS
Para o download da versão gratuita, clicamos em “Download fot Ext JS 4.0.7 GPL”. Salve em um diretório de sua preferência.
Após o download ser concluído, basta descompactarmos o arquivo .zip que baixamos, que nos dará a seguinte estrutura de pasta:
Figura 2: Estrutura de pasta do ExtJS
Prática
Para iniciarmos nossa prática, vamos criar os arquivos “index.html” e “index.js”, dentro do diretório onde se encontra a pasta “ext-4.0.7-gpl”, ficando da seguinte maneira a estrutura de pasta:
Figura 3: Arquivos necessários para uso do ExtJS
Dentro do arquivo index.html vamos carregar os arquivos necessários para o funcionamento do ExtJS dentro do cabeçalho, ou seja, dentro do <head>.
- Ext-all.css: Arquivo que contém todos os estilos CSS do ExtJS.
- Ext-all.js: Arquivo que contém todos os códigos referentes aos componentes, sejam eles visíveis ou não para os usuários.
- Ext-base.js: Este arquivo pode ser usado tanto com o ExtJS quanto com outras bibliotecas, tais como, jQuery.
E por último carregamos o arquivo index.js que criamos, que vai conter todo o nosso código necessário para o exemplo que estamos criando.
Listagem 1: Importação dos arquivos necessários<!DOCTYPE html><html> <head> <title>Testando o ExtJS</title> <link rel="stylesheet" href="ext-4.0.7-gpl/resources/css/ext-all.css" type="text/css" /> http://ext-4.0.7-gpl/adapter/ext/ext-base.js http://ext-4.0.7-gpl/ext-all.js http://index.js </head> <body> <input type="button" id="btClose" value="Fechar janela"></input> </body></html>
Agora vamos abrir o nosso arquivo index.js e colocarmos o seguinte código:
Listagem 2: Arquivo index.jsExt.onReady(function(){ var win = new Ext.Window ({ height: 200, width: 300, title: 'Teste', html: '<b>Tstando uma aplicação feita com ExtJS</b>' }) win.show(); Ext.get('btClose').on('click', function() { win.close(); })})
Vamos agora compreender o que foi realizado nesse código acima.
Dentro do Ext.onReady definimos uma função por parâmetro, quando fizemos a utilização de uma function (função) por parâmetro e conhecida por call-back, por que essa função vem a ser executada por alguma outra parte do código, que não possui conhecimento algum dessa função. Esta função somente é carregada após todos os outros elementos da nossa aplicação terem sido carregados, desse modo, evitando eventuais problemas que possam vir a ocorrer. E é nessa função que inserimos todo o código que desejamos que seja executado ao abrirmos nossa página.
Dentro dessa função começamos criando a variável “win” e ligamos uma janela “ext.Window” com as dimensões 300px de largura e 200px de largura, e definimos um texto para ser exibido dentro dessa janela.
Depois da criação dessa janela através da nossa variável “win”, utilizamos o método “Show”, no qual fazemos com que essa janela que criamos seja exibida ao usuário. Como não definimos qual será seu posicionamento, ela automaticamente se posicionará exatamente no centro da tela do navegador.
E por fim usamos “Ext.get()”. Podemos comparar esse método com o já conhecido document.getElemetByID().
Agora que já terminamos de inserir os códigos nos dois arquivos que criamos no início do exemplo, vamos testa-lo. Para isso, abra o arquivo “index.html” em qualquer navegador de sua preferência e devemos obter o seguinte resultado: uma janela azul no meio do navegador e se clicarmos no botão fechar, janela essa janela azul será fechada, conforme mostrado na figura a seguir. Porém, como é um objeto do ExtJS, podemos perceber que com o Ext.get o objeto retornado possui todas as propriedades e métodos do objeto Ext.Element. E a propriedade Ext.get(‘IdDoElementoDesejado’).dom nos traz as mesmas coisas que o “document.getElementByID”, dessa forma, usando o Ext.get podemos utilizar de eventos com facilidade. Como podemos perceber, nesse caso associamos um evento ao botão com id ”btclose” utilizando o método “on”, que recebe três parâmetros:
- Nome do evento que desejamos associar;
- A função call-back que será utilizada quando o evento for acionado;
- E o escopo, sendo esse um parâmetro opcional.
Traduzindo, ligamos uma função ao evento click do nosso botão que pegou a variável onde possui a janela e com isso executa o método “close” para fechar.
Figura 4: Resultado do exemplo de teste do ExtJS
Caso o resultado não seja igual ao mostrado na figura 4, verifique se seu código está igual ao mostrado acima.
Conclusão
Neste artigo conseguimos concluir que ExtJS agiliza bastante o desenvolvimento de aplicações web, com suas ferramentas para o desenvolvimento de interfaces atraentes, eficientes e principalmente funcionais. Isso por que o ExtJS deixa o desenvolvedor sem a preocupação com a parte visual, que na maioria das vezes não é tão importante quanto a parte de tratamento dos dados. Podemos resumir o ExtJS em três palavras: bom, bonito e barato.
E se você se interessou por esse framework recomendo o conteúdo da BSource eles são uma empresa especializada em Ext JS e produzem conteúdo através do Youtube e Blog eles detalham mais coisas sobre o Ext JS.
Espero que o artigo tenha sido do agrado de todos os leitores.Até a próxima.
BlogDesenvolvendo 