Sencha Inc. | HTML5 Apps

Basic Page Setup

Published Mar 12, 2009 | Jozef Sakalos | Tutorial | Easy
Last Updated Jul 11, 2011

This Tutorial is most relevant to Ext JS, 2.x, 3.x.

Preface

This tutorial shows how a basic Ext JS page should be structured. 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>
Share this post:
Leave a reply

Written by Jozef Sakalos

Commenting is not available in this channel entry.