Sencha Inc. | HTML5 Apps

HTML Page Setup

Published Dec 25, 2010 | Michael LeComte | Tutorial | Easy
Last Updated Jul 11, 2011

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

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:

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:

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

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!!

Share this post:
Leave a reply

Written by Michael LeComte

1 Comment

Hemant

3 years ago

Could you please update these tutorial for EXT JS 4.*? It’s seem to be it’s for EXT JS 3.*.

Leave a comment:

Commenting is not available in this channel entry.