Começando com Ext JS
Posted by Loiane | Posted in Ext JS | Posted on 04-06-2009
10
O post de hoje tem como objetivo fazer uma breve apresentação sobre a biblioteca Ext JS e como fazer o setup e um Hello World para começar a usar esta biblioteca em seu projeto.
Nos últimos dias, tenho estudado uma biblioteca JavaScript chamada Ext JS. Com essa biblioteca, é possível construir aplicações/telas com uma interface gráfica bem rica. Tenho me surpreendido, pois dá pra fazer muitas coisas legais, sem precisar de colocar a mão na massa com javascript puro. E a interface fica muito mais ‘bonitinha’!
Para começar, dê uma conferida no site da biblioteca, o extjs.com. Existe uma comunidade brasileira também (fórum): extjs.com.br
Navegando pelos resultados do Google, o material sobre Ext JS em português é bem escasso. Até agora, não tem nenhum livro em português, porém, a comunidade brasileira tem um projeto para traduzir a documentação encontrada no site da bibliteca. Alguns exemplos já estão traduzidos também. Existe também, uma tradução livre do Ext Core, feita pelo Otávio Augusto Rodrigues Fernandes.
Os únicos livros que encontrei são:
Como configurar Ext JS para seu projeto Java:
Considerações: neste post, vou utlizar a versão 2.2.1 e a Eclipse IDE, prevendo que um projeto web java pode ser desenvolvido (a IDE não é necessária, se desejar, pode criar uma pasta em um diretório qualquer e seguir os passos).
O primeiro passo é fazer o download da biblioteca. Após o download, vamos criar um projeto web. Coloque as pastas ‘adapter’ e ‘resources’ dentro de uma pasta onde ficarão os arquivos do Ext JS. Coloque também os arquivos ext-all.js, ext-all-debug.js, ext-core.js, ext-core-debug.js. Veja a figura abaixo como vai ficar a estrutura do projeto.
Obs.: Nem todos os arquivos são necessários, mas pode ser que futuramente você precise usar algum outro arquivo js, então, este já estará no seu projeto.
Vamos criar agora a estrutura básica da página:
Vamos agora verificar se tudo está ok, colocando uma mensagem (alert). Para isso, precisamos colocar o código abaixo dentro de uma tag script ou colocar em um arquivo js:
E temos o seguinte resultado:
Prontinho! Agora já podemos começar a ‘brincar’ com a biblioteca!
Se desejar, pode baixar o código deste post aqui:
Até a próxima!
E ai loiane,
Tava só esperando você postar a experiência.. Muito massa…estou acompanhado viu.. Eu só uso jQuery, mas tou fazendo uma coisa bem legal aqui com Ajax + JSON + jQuery.. Assim que terminar vou postar… Uma coisa bem legal..
Parabéns…
Beijoss…
Oi Loiane,
Eu nunca trabalhei com o ExtJS apesar de ter lido/visto algumas coisas com ele, e como você disse, é impressionante o poder que ele tem. Bem bacana mesmo, parabéns!
[]s,
loiane,
qual versão do eclipse você usa? não consigo importar o seu projeto para o meu (pede só um .war e não achei isso no seu fonte). também não sei executar um jsp. tem como você falar como? uso o eclipse ganymede;
Muito bom Loiane… com extjs da pra fazer coisas muito legais mesmo!
[...] Para a demonstração, vou utilizar o projeto do post sobre ‘Começando com Ext JS‘. [...]
[...] post Começando com Ext JS mostrou como configurar sua aplicação para começar a trabalhar com Ext JS. O post de hoje tem [...]
Loiane,
Estou tentando acompanhar os seus postes, estou usando o eclipse Galileo e baixei a versão 3.0.0 do ext-js e não achei os arquivos ext-core.js e ext-core-debug.js
Ainda estou no post “Começando com Ext JS”.
Abraços
Olá Jean,
Obrigada pela visita ao blog!
A versão utilizada neste post é 2.x.
Os arquivos ‘core’ não são obrigatórios, apenas deixei para caso futuro.
Na versão 3, inclua apenas os arquivos ext-all.js e adapter/ext/ext-base.js, que você já terá acesso aos componentes da biblioteca.
Abraço
ola, estou tendo que desenvolver modulos adcionais para um sistema que eh todo em ext e tenho estudado a matéria, contudo devido as personalização das instancias e tudo mais, não consegui sair do zero ainda, será que poderia me dar uma luz ?????
http://www.group-office.com/
http://www.group-office.com/wiki/Main_Page
Esse é o site oficial do sistema, se pude rm dar uma dica de como fazer um modulo simplezinho, na referencia tem um exemplo, mas mesmo fazendo tudo o que eh pedido não funciona…..
Obrigado
@ricardo
Sugiro você começar aos poucos. A bilioteca do ExtJS é bem extensa e você tem inúmeras possibilidades na hora de montar o seu componente.
Comece pelo painel, depois vá para as abas e dentro de cada aba, estude cada componente que terá que usar. O fórum oficial do ExtJS é ótimo para dicas e para achar coisas mais complicadas de fazer.0
Tente seguir o exemplos. Geralmente é Ctrl C + Ctrl V e mudar a origem de onde você obtém os dados.
Qualquer coisa que puder ajudar, estou à disposição!
Abraços