Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel Ribeiro

[ExtJS][#001 ] Conhecendo o ExtJS

Por , em Javascript

Recommended Posts

Daniel Ribeiro    4

Daniel Ribeiro
Postado

Olá pessoal, tudo bem?

 

Estou começando agora uma série de tutoriais escritos (em breve em vídeo) sobre um dos mais poderosos frameworks desenvolvidos sob a linguagem Javascript: o ExtJS.

 

[ExtJS][#001] Conhecendo o ExtJS - Como configurar a página HTML e trabalhar com o básico do framework

Para começar a trabalhar com o framework ExtJS, você deve fazer o download de sua biblioteca, é claro. Acesse o link http://www.extjs.com...js/download.php e baixe o arquivo como mostrado na figura abaixo:

 

Imagem 001.01

Imagem Postada

 

Após fazer o download, você deve organizar seu projeto para conter o ExtJS.

 

Pense na sua estrutura de pastas, como costuma organizar seus arquivos. Extraia o ExtJS e renomeie a pasta Ext JS 3.2.1 para ExtJS.

 

Sua estrutura deve ficar mais ou menos assim:

 

Imagem 001.02

Imagem Postada

Pronto! Agora que você já tem um projeto criado e contendo a biblioteca do ExtJS, você está pronto para começar!

 

O próximo passo é configurar nosso index.html para carregar estas bibliotecas corretamente.

 

O seu arquivo deve manter essa estrutura básica:

Imagem 001.03

Imagem Postada

 

Pegue o código abaixo:

 

<!-- Não declare DOCTYPE aqui, a não ser que você queira problemas com o IE. -->
<html>
	<head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title></title>

 	<!-- Biblioteca ExtJS: base/adapter -->
 	<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
 	<!-- Biblioteca ExtJS: todos os widgets -->
 	<script type="text/javascript" src="ExtJS/ext-all-debug.js"></script>

 	<script type="text/javascript">

			Ext.BLANK_IMAGE_URL = 'ExtJS/resources/images/default/s.gif';

			Ext.onReady(function(){
				
 console.info('cadela baia!!');

			});

 	</script>
	</head>
	<body>
	</body>
</html>

E agora, para testar o que foi feito, você precisará de uma ferramenta muito interessante já conhecida por muitos programadores: o FireBUG.

 

O FireBUG é um complemento (add-on) para o Mozilla Firefox que debuga CSS, HTML e, mais importante para nós, Javascript.

 

Para fazer o download, clique neste link: https://addons.mozil...efox/addon/1843

 

Após ter instalado o FireBUG em sua máquina. Abra seu site e clique no ícone do firebug, no canto inferior direito do navegador, como demonstrado na figura 04 abaixo.

 

Imagem 001.04

 

Imagem Postada

 

Ao clicar neste ícone, você perceberá que o FireBUG expandirá um pedaço da janela e mostrará seus menus de opções. Clique no menu console e veja o que aconteceu.

 

Imagem 001.05

Imagem Postada

 

Exatamente! Enviamos uma mensagem via javascript para o console do FireBUG! Incrível, não?

 

O que vimos:

 

  • Incluímos os arquivos ext-base.js e ext-all-debug.js, os principais arquivos para carregar a biblioteca do ExtJS em nosso site.
  • Especificamos um link para a imagem s.gif, uma imagem em branco necessária para a renderização da tela pelo ExtJS.
  • Jogamos uma mensagem no console dentro no bloco onReady.
Na próxima aula, veremos um pouco sobre alertas de tela e alguns outros recursos básicos do ExtJS. Até lá!

Daniel Ribeiro Gomes.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mesmo que seja uma releitura, é legal postar a fonte:

 

http://www.extjs.com/learn/Tutorial:HTML_Page_Setup_(Portuguese)

 

Ninguém deve gostar de ter um material 'usurpado', e creio que essa não tenha sido a tua intenção.

Mas muito bom! o tutorial de ExtJS vai ajudar muitas pessoas certamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Ribeiro    4

Daniel Ribeiro
Postado

Mesmo que seja uma releitura, é legal postar a fonte:

 

http://www.extjs.com...up_(Portuguese)

 

Ninguém deve gostar de ter um material 'usurpado', e creio que essa não tenha sido a tua intenção.

Mas muito bom! o tutorial de ExtJS vai ajudar muitas pessoas certamente.

 

Com certeza essa não foi a minha intenção. Utilizei-me do material oficial apenas para começar a série de tutoriais, afinal estas dicas básicas que eles dão são muito boas.

 

E as imagens são todas de minha autoria.

 

Vou editar com a fonte do site oficial, mas não se preocupe que não sou esse tipo de pessoa que copia as coisas sem vergonha na cara.

 

Em breve a parte 2. Abraços!

 

OBS: Não há mais a possibilidade de editar o tópico. Mas a fonte já foi citada pelo William. Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito