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>