Ext JS - Learning Center

Tutorial:Basic Page Setup

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Shows correct HTML markup of the main page
Author: Jozef Sakalos
Published: March 11, 2009
Ext Version: 2.0+
Languages: en.png English cn.png Chinese br.png Portuguese

Preface

It happens quite often to people that just found ExtJS and are enthusiastic to start to use it that they have difficulties setting up a basic page.

This tutorial shows what a basic page should look like. It is meant as a template that you can copy & paste and adjust to your needs.


The index.html markup

Your index.html page should look like the following: 

<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>
 
<!-- Each valid html page must have a head; let's create one. -->
<head>
  <!-- The following line defines content type and utf-8 as character set. -->
  <!-- If you want your application to work flawlessly with various local -->
  <!-- characters, just make ALL strings, on the page, json and database utf-8. -->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
  <!-- Ext relies on its default css so include it here. -->
  <!-- This must come BEFORE javascript includes! -->
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
 
  <!-- Include here your own css files if you have them. -->
 
  <!-- First of javascript includes must be an adapter... -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
 
  <!-- ...then you need the Ext itself, either debug or production version. -->
  <script type="text/javascript" src="ext/ext-all-debug.js"></script>
 
  <!-- Include here your extended classes if you have some. -->
 
  <!-- Include here you application javascript file if you have it. -->
 
  <!-- Set a title for the page (id is not necessary). -->
  <title id="page-title">Title</title>
 
  <!-- You can have onReady function here or in your application file. -->
  <!-- If you have it in your application file delete the whole -->
  <!-- following script tag as we must have only one onReady. -->
  <script type="text/javascript">
 
  // Path to the blank image must point to a valid location on your server
  Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
 
  // Main application entry point
  Ext.onReady(function() {
	// write your application here
  });
  </script>
 
<!-- Close the head -->  
</head>
 
<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body></body>
 
<!-- Close html tag at last -->
</html>

If you need more description as to what all that in the above template means then see HTML Page Setup. It contains detailed description.

Retrieved from "http://www.extjs.com/learn/Tutorial:Basic_Page_Setup"
  • This page was last modified on 18 May 2009, at 14:22.
  • This page has been accessed 49,937 times.