Ext JS - Learning Center

Tutorial:Basic Page Setup (Portuguese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Mostra o HTML correto da página principal
Author: Jozef Sakalos
Published: May 18, 2009
Ext Version: 2.0+
Languages: en.png English cn.png Chinese br.png Portuguese

Prefácio

Acontece com bastante freqüência, com pessoas que acabaram de descobrir a ExtJS e estão entusiasmadas para começar a usá-la, de terem dificuldades em configurar uma página base.

Este tutorial mostra como uma página base deve parecer. É destinado a ser um template que você pode copiar & colar, e ajustar às suas necessidades.

A marcação para index.html

Sua página index.html deve parecer com a seguinte: 

<!-- Não coloque nenhum DOCTYPE aqui, a não ser que queira ter problemas com o IE. -->
<html>
 
<!-- Toda página html válida deve ter uma tag head, vamos criar uma. -->
<head>
  <!-- A linha seguinte define o content type e utf-8 como conjunto de caracteres. -->
  <!-- Se quiser que sua aplicação trabalhe sem problemas com vários caracteres locais, -->
  <!-- configure TODAS as strings na página como json, e a base de dados como utf-8. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
  <!-- A Ext precisa de seu css padrão, então o inclua aqui. -->
  <!-- Isto deve vir ANTES das inclusões javascript! -->
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
 
  <!-- Inclua aqui seus próprios arquivos css, se você os tiver. -->
 
  <!-- O primeiro javascript incluído deve ser um adaptador... -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 
  <!-- ...então você precisa da própria Ext, tanto na versão debug como na de produção. -->
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
  <!-- Inclua aqui suas extensões, se você tiver alguma. -->
 
  <!-- Inclua aqui o arquivo javascript de sua aplicação, se você o tiver. -->
 
  <!-- Defina um título para a página (o id não é necessário). -->
  <title id="page-title">Title</title>
 
  <!-- Você pode ter a função onReady aqui ou em seu arquivo de aplicação. -->
  <!-- Se você tiver essa função em seu arquivo de aplicação, apague todo -->
  <!-- o script abaixo, já que devemos ter apenas uma função onReady. -->
  <script type="text/javascript">
 
  // O caminho da imagem em branco deve apontar para uma localização válida em seu servidor
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
  // Ponto de entrada da aplicação principal
  Ext.onReady(function() {
	// escreva sua aplicação aqui
  });
  </script>
 
<!-- Feche a tag head -->  
</head>
 
<!-- Você pode deixar o body vazio em vários casos, ou pode escrever seu conteúdo nele. -->
<body></body>
 
<!-- Por fim, feche a tag html -->
</html>

Se você precisa de mais detalhes, como saber o que tudo no template acima significa, então veja HTML Page Setup. Esse tutorial contém descrições detalhadas.

Retrieved from "http://www.extjs.com/learn/Tutorial:Basic_Page_Setup_(Portuguese)"
  • This page was last modified on 18 May 2009, at 14:42.
  • This page has been accessed 839 times.