Ext JS - Learning Center

Tutorial:HTML Page Setup

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: HTML Page Setup
Author: Mjlecomte
Published: September 21, 2008
Ext Version: 2.0+
Languages: en.png English br.png Portuguese ru.png Русский

Contents

Empty HTML

Let's just create a fairly basic HTML page. We will build it up in stages and discuss it as we go along. 

<!-- Do NOT put any DOCTYPE here unless you want problems in IEs. -->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
 
    </head>
    <body>
    </body>
</html>

Easy enough. Notice we have no DOCTYPE specified and there's nothing in between the body tags.

To support characters for various languages specify utf-8 for the character set (more information here).


Head Section

Ok let's set up a rough template for the CSS and JavaScript resources that will be used. 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
 
        <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
        <!-- overrides to base library -->
 
 
        <!-- ** Javascript ** -->
        <!-- ExtJS library: base/adapter -->
 
        <!-- ExtJS library: all widgets -->
 
 
        <!-- overrides to base library -->
 
        <!-- extensions -->
 
        <!-- page specific -->
 
        <script type="text/javascript">
 
        </script>
 
    </head>
    <body>
    </body>
</html>

We've basically just set up placeholders for our various resources. The first thing we've included as recommended by Yslow is our CSS. The default CSS file ExtJS (ext-all.css) resets the page and provides a foundation to build on, so it is included first. If we need to override any CSS we'll include it afterwards.

Next we'll include our JavaScript. The order you include files is important.

Final Template

As already mentioned the order you include files is important. 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
 
        <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
        <!-- overrides to base library -->
 
 
        <!-- ** Javascript ** -->
        <!-- ExtJS library: base/adapter -->
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <!-- ExtJS library: all widgets -->
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
 
 
        <!-- overrides to library -->
 
        <!-- extensions -->
 
        <!-- page specific -->
 
        <script type="text/javascript">
        // Path to the blank image should point to a valid location on your server
        Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
 
        Ext.onReady(function(){
 
           console.info('woohoo!!!');
 
        }); //end onReady
        </script>
 
    </head>
    <body>
    </body>
</html>

What we've done now is:

  • include ext-base.js. The base file for ExtJs.
  • include ext-all-debug.js. The kitchen sink for all ExtJs splendor.
  • specified a link to a local s.gif file so the Ext library isn't looking back at www.extjs.com
  • threw in a console statement into an onReady block. This is just a test to see if we have our page set up correctly. If all is right in the world, we should be able to open firebug and see that statement in the console tab.

Bad references to source files

Well we navigate to our page through http://something (not file://) and see this at the bottom of the page:

Image:Form1.PNG

Click on the red circle with the X to open firebug and see what the problem is:

Image:Form2.png

Ext is undefined? WTF? Let's check the NET tab and see what that shows:

Image:Form3.PNG

Anything in red was not found. If you hover over the red lines you can see where the browser tried to get the resource from. Looks like I made a mistake in my relative reference. So I fix that up and refresh the page:

Success

Image:Form4.PNG

Woohoo! No firebug errors and the console statement executed inside the Ext.onReady() block. That means ExtJS is loaded up and we're ready to rock!! Bold text

Retrieved from "http://www.extjs.com/learn/Tutorial:HTML_Page_Setup"
  • This page was last modified on 8 October 2009, at 04:45.
  • This page has been accessed 27,658 times.