Extjs Getting Started
<!-- 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" />
        <!-- ** 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 -->

        <!-- a localization script file come here --> 

        <!-- page specific -->
    <script type='text/javascript' src='/javascript/applayout.js'></script>
        <script type="text/javascript">

        Ext.onReady(function(){

           console.info('woohoo!!!');

        }); //end onReady
        </script>
    </head>
    <body>
    </body>
</html>

applayout.js:

Ext.BLANK_IMAGE_URL = '/javascript/extjs/resources/images/default/s.gif';
Ext.namespace('myNameSpace');
myNameSpace.app = function() {
    // Do not access DOM from here; element don't exist yet.
    // Private variables
    // Private functions
    // Public space
    return {
        // public properties
        // public methods
        init: function() {
            // do something
        }
    };
}();

Playing around with ExtJS:

Just go to a page that already has ExtJS loaded, run the following code via Firebug Console.

Ext.get(document.body).update('<div id="test"></div>');

This code replace the content of the body element with an empty div. You can do whatever you want.

onReady:

Ext.onReady(function() {});

Basic application structure:

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html
  • appname is a directory that contains all your application's source files
  • app contains all your classes, the naming style of which should follow the convention listed in the Class System guide
  • extjs contains the Ext JS 4 SDK files
  • resources contains additional CSS and image files which are responsible for the look and feel of the application, as well as other static resources (XML, JSON, etc.)
  • index.html is the entry-point HTML document
  • app.js contains your application's logic

How to create the basic helloext application structure?

To do this we'll create a basic "hello world" Ext JS application called "Hello Ext". First, create the following directory and files in your web root directory:

- helloext
    - app.js
    - index.html

Then unzip the Ext JS 4 SDK to a directory named extjs in the helloext directory. A typical Ext JS application is contained in a single HTML document - index.html. Open index.html and insert the following html code:

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
  • extjs/resources/css/ext-all.css contains all styling information needed for the whole framework
  • extjs/ext-debug.js contains a minimal set of Ext JS 4 Core library classes
  • app.js will contain your application code

Now you're ready to write your application code. Open app.js and insert the following JavaScript code:

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Now open your browser and navigate to http://localhost/helloext/index.html. You should see a panel with a title bar containing the text "Hello Ext" and the "welcome" message in the panel's body area.

Ext JS 4 comes with a system for dynamically loading only the JavaScript resources necessary to run your app. In our example Ext.create creates an instance of Ext.container.Viewport. When Ext.create is called the loader will first check to see if Ext.container.Viewport has been defined. If it is undefined the loader will try to load the JavaScript file that contains the code for Ext.container.Viewport before instantiating the viewport object. In our example the Viewport.js file gets loaded successfully, but the loader detects that files are being loaded in a less-than optimal manner. Since we are loading the Viewport.js file only when an instance of Ext.container.Viewport is requested, execution of the code is stopped until that file has been loaded successfully, causing a short delay. This delay would be compounded if we had several calls to Ext.create, because the application would wait for each file to load before requesting the next one.

To fix this, we can add this one line of code above the call to Ext.application:

Ext.require('Ext.container.Viewport');

This will ensure that the file containing the code for Ext.container.Viewport is loaded before the application runs.

Should we use ext-all.js in production environment?

Perhaps not. It is not recommended. You should create a custom build for your production environment.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License