[Curso de ExtJS 4] Aula 02 – Instalação e Hello World
Vídeo/Screencast de hoje: segunda aula do curso gratuito de Ext JS 4!
![curso extjs4 aula02 loiane [Curso de ExtJS 4] Aula 02 – Instalação e Hello World](http://www.loiane.com/wp-content/uploads/2011/11/curso-extjs4-aula02-loiane.png "curso-extjs4-aula02-loiane")
Na primeira aula vimos uma introdução ao Ext JS 4 e também vimos um overview de alguns recursos do framework. Nessa segunda aula, vamos começar a colocar a mão na massa e ver como e onde podemos fazer o download do Ext JS 4, vamos entender para que servem os arquivos que vêm junto ao SDK do Ext JS 4 e também vamos aprender a “instalar” O Ext JS e vamos fazer o nosso primeiro “Hello, World!”.
Quem quiser ver todas as aulas já publicadas, é só clicar aqui.
Espero que gostem dessa aula e fico no aguardo do feedback de vocês! ![icon smile [Curso de ExtJS 4] Aula 02 – Instalação e Hello World](http://www.loiane.com/wp-includes/images/smilies/icon_smile.gif "[Curso de ExtJS 4] Aula 02 – Instalação e Hello World"){kind=icon}
Requerimentos:
- Ext JS 4 SDK
- Servidor Apache (não é obrigatório, mas recomendado ter instalado na máquina) – vai nos ajudar a executar alguns exemplos mais pra frente no curso.
- Editor de Texto (qualquer um de sua preferência). No vídeo usei o Sublime Text 2 (tem pra Mac OS, Windows e Linux – a versão shareware não expira!)
- Browser (de preferência Firefox ou Chrome - vai nos ajudar a debugar código js mais para frente do curso).
Vídeo:
Vimeo: http://vimeo.com/loiane/curso-extjs4-aula02
Youtube: http://youtu.be/Z_hmPYmml34
Código: https://github.com/loiane/curso-extjs4
Slides:
Até a próxima aula!
Comments (60)
Links to this Post
- Curso de ExtJS 4 – Gratuito! | Loiane Groner | 06/12/2011
Parabéns pela iniciativa. E parabéns pela qualidade.
Show de bola, gostei muito da aula.
Novamente parabéns.
Muito bom Loiane, vai me ajudar bastante, sua didática é excelente! parabéns!
Muito bom! Obrigado mais uma vez por este ótimo curso!
excelente apresentação
Parabéns
Mais uma ótima aula.
Excelente!
Ótima aula e com detalhes que não vi em nenhum outro local.
Parabéns!
MUUUUITO BOM !
Primeiro na net por mulher, parabéns, muito bom o curso, e continuarei a seguir a sequencia de curso.
Ótima video aula, parabéns, espero que continue com as aulas….
Muito obrigado Loiane, muito bom mesmo. Você tem uma ótima didática.
Agradeço pela sua disposição em ajudar, sem cobrar nada.
Não sabe o quanto esse curso vai me ajudar.
Oi Loiane
sua voz é linda, muito gostosa de ouvir a aula ficou muito melhor
Muito bom curso, assisti a 1ª e 2ª Aula e tenho certeza que o ExtJS será um recurso bastante importante no aprimoramento do nosso Portal.
Parabéns Loiane pela dedicação, muito bem explicado mesmo.
Agora tenho que observar no time: 32:07 deste video, parece ter uma voz macabra por trás…Notaste???
abs…
Parabens Loiane ja era seu fa nos exemplos de scripts agora com as aulas sou mais ainda. Parabens pelo trabalho, vou ajudar a divulgar suas video aula e o seu site,
Loiane,
Parabéns, pois a didática está impecável.
Só um detalhe é que a prática de código javascript é legal, mas o correto é que ela fique dentro da tag body, imediatamente antes do fechamento ().
Usar a tag script fora da tag body ou head está não-conforme padrões W3C.
Opa, Denilson,
Valeu pela dica! Vou implementar para as próximas aulas!
Obrigada!
Olá Loiane,
Começei essa semana a estudar ExtJS e encontrei seu curso.
Estou achando bem interessante o material, porém no primeiro exemplo (HelloWorld), a página fica um pouco desconfigurada.
O frame do alert aparece no canto superior da página e as mensagens e botão de OK no centro da página.
Clicando em OK o alert fecha.
Pensei que podia ser por eu ter apagado algum arquivo a mais do SDK, então instalei novamente no server (estou usando Tomcat), mas o erro persisti.
Você sabe o que pode ser?
Obrigado.
Olá Rodrigo,
Vc importou o arquivo css corretamente?
Tente executar o exemplo que está no github e veja se está dando o mesmo erro.
[]‘s
Loiane,
O erro realmente era na importação do CSS. Digitei resource e não resources no caminho do arquivo.
Agora está correto.
Obrigado,
[]‘s
Olá Loiane!
Aula muito legal e dinâmica, segui todos os passos e tudo funcionou corretamente. Como esse é meu primeiro contato com ExtJS, fiquei até espantado com a caixinha mexendo com 1 linha de código rsrsrs.
Eu vi você falando sobre os códigos que estão disponíveis no GitHub não sei se foi nessa ou na primeira aula, sempre quis aprender a utilizá-lo, você tem algum tutorial em seu blog ou poderia indicar onde posso aprender à utilizá-lo?Procurei aqui, mas não encontrei, parabéns mais uma vez!
Olá Loiane, por que você recomenda o Apache como servidor? Grato!
Oi Vilmar,
Porque a Sencha tb recomenda o Apache e é fácil de instalar, mas vc pode usar o de sua preferência.
parabéns novamente
Olá Loiane, parabéns pela iniciativa.
O produto é exatamente o que eu estava procurando para desenvolvimento na Web, excelente!
Pesquisando então sobre o assunto, encontrei o seu curso, que é excepcional! Didática perfeita.
Estarei a partir de hoje acompanhando suas vídeo-aulas, ok?
[]´s
Olá Loiane, seu Blog não disponibiliza Dowloads das Video Aulas? se tiver onde eu consigo?
Olá Wilton,
Vc pode fazer o download gratuito do arquivo original das aulas pelo vimeo, basta ter um cadastro no site deles (que tb é gratuito).
Parabéns!! ótimo curso! continuarei acompanhando.
Ola Loiane, sou um novato em programação WEB, estava fazendo o meu primeiro Ola Mundo e quando o rodei no Firefox, ele ficou todo no canto superior esquerdo. Vc pode me ajudar !!!!
Eis o código:
Ext.onReady(function(){
Ext.MessageBox.alert(‘Hello’,'Hello World’);
});
Existe alguma configuração que preciso fazer no firefox !!
Oi Roberto,
provavelvemente vc esqueceu de importar o CSS do ExtJS 4 ou está apontando para o caminho errado. Veja no firebug se o browser consguiu carregar o arquivo corretamente.
[]‘s
Olá, acabo de ver a primeira aula e estou indo a segunda. Muito bom, você explica muito bem, nunca usei EXTJS mas estarei iniciando um curso sábado agora aqui na minha cidade e já vou entrar sabendo bastante coisa, quem sabe não adquiro seu livro depois! Obrigado e Parabens!
Boa noite Loiane, achei seu site na internet, e achei muito interessante e resolvi estudar javascript… Sou bem leigo no assunto, instalei o apache, instalei o extjs 4, normal, está funcionando tudo ok… só que o primeiro exemplo não funciona, não sei se salvei no lugar certo, fiz igual ao do código postado gethub e também não funcionou…. Testei o código, colocando uma msg entre o e apareceu normal… acredito que estou fazendo algo de errado para importar as folhas de estilo… como eu faço para debugar usando o chrome?
Abraços… Parabéns pelo site
Eu devo estar fazendo alguma coisa errada, baixei a última versão do extjs (4.1), e instalei conforme explicado, aqui eu uso win 7 ultimate 64 bits, e xampp com apache, quando eu entro no localhost na pasta do extjs não mostra corretamente a página do sdk
Oi Linces,
Basta vc descompactar todo o conteúdo do SDK do ExtJS no diretório htdocs dentro do xampp, de preferencia numa pasta chamada extjs (ou similiar) e acessar via localhost/extjs
[]‘s
Oi Loiane! Estou tentando rodar a mesma aplicação que fizeste nesta aula pelo eclipse mas está mostrando um erro: “Ext is not defined”.
Ele não está reconhecendo o Ext. Tens como me ajudar?
Muito obrigado!!
Oi Thiago,
Abra o firebug ou developer tools e veja se o endereço para o extjs está correto.
[]‘s
Olá Loiane mais uma vez parabéns pelas aulas. Bom, fiz o exemplo direitinho do hello world, mas eu tenho uma pequena dúvida. Quando importo o arquivo ext-all.js pro html ( no meu caso estou usando a plataforma .net ) e dentro do onReady digito “Ext.” aparece o intellisense mas não aparece a opção MessageBox, é normal isso em toda IDE? []‘s
Olá Loiane, eu não consigo carregar os arquivos do Ext JS pro Sublime Text 2. Ah! eu sou novo nisso, não tenho conhecimento nenhum no Ext JS.
Eis um link da minha dúvida.
http://i47.tinypic.com/25sq2x0.png
Oi Sylvio,
é assim mesmo, basta copiar o sdk pra dentro do sublime text e na página html vc faz a referência.
Qualquer coisa dá uma olhada no github para ver como estão so arquivos.
Olha, eu sou novo nessa aréa.
Não estendi o que você quis dizer.
Você não tem uma vídeo-aula disso ? ou imagems ?
Oi Sylvio,
Essa video-aula #2 é justamente sobre isso. Só seguir o passo a passo.
[]‘s
Mais quando está no Tempo 09:28 você abre o Sublime Text 2 com um arquivos carregados…
http://bit.ly/UuYUXa
Daí eu quero carregar esses arquivos pro meu Sublime Text 2 ou o Notepad++ (Meu SO éo Windows 7 Ultimate).
Mais eu não sei…
Sylvio,
Isso é feito no explorer. Você vai criar uma pasta chamada curso, e vai copiar o SDK do extjs para dentro dela. Aí vc abre a pasta com o sublime text ou outro editor de texto. Isso não é feito no sublime text, é feito fora dele. Crie a pasta, copie a pasta do SDK que vc baixou do site da sencha e abra com o sublime text. É como abrir qualquer outro arquivo no editor de texto.
Como te falei, baixe o repositório do github e abre ele no sublime text.
Eu quero aprender a carregar os arquivos pra um Editor de texto, mas quando você chegar nesse assunto na vídeo-aula você abre o programa carregado e não mostra como que carrega…
http://bit.ly/UuYUXa
Olá, eu fiz e ja corrigi mil vezes, mas nao acho o problema. O navegador fica tudo branco e nao aparece nada!
Alguem pode me ajudar?
Oi Marivaldo,
Abra o developer tools ou o firebug e veja se o arquivo ext-all.js e o ext-all.css esão sendo carregados corretamente.
[]'s
Oi Loiane, eu tambem fiz tudo mais o navegador fica tudo em branco, estou usando Chrome, e acho que os dois arquivos estao sendo carregados corretamente
Oi,
Use o firebug ou developer tools do chrome para ver se os arquivos estão sendo carregados corretamente.
Se estiverem sendo carregados corretamente e o código estiver correto, o que mais poderia estar errado para não funcionar?
Olá, nao sei se é burrice ou o que. Eu fiz e ja revisei 100 vezes, chequei pra ver se os caminhos estavam certos e tudo mais. O que acontece é que nao aparece nada no navegador. Fica tudo branco.
Alguem pode me ajudar?
Oi Marivaldo,
Abra o developer tools ou o firebug e veja se o arquivo ext-all.js e o ext-all.css esão sendo carregados corretamente.
[]‘s
Não sei se fiz algo errado, mas a página fica em branco. Os caminhos para os arquivos estão corretos, clicando neles aparece o código, porém o alert não funciona.
Você programando web?
Erro de JS.
Eu gosto de Ext JS, mas o jQuery não pode ser esquecido.
Mas não consegui fazer funcionar nem o hello world! Hehehe. Não acontece nada!
Meu erro era banal… troquei um src por um href.
Começando a estudar o EXT JS com a Loiane. Adeus FLEX. Será?
Começando a estudar o EXT JS. Fim do FLEX? Será?
Valeuu Loiane, ótima aula! Parabéns.