Sencha’s EXTJS 4: Getting Started Quickly


Getting started with Sencha’s EXTJS

  1. Download the Library – EXTJS 4.0.7:
  2. Unzip the contents of the download to a folder in root of your web server. I used /extjs. It should look something like the following image where “extjs” is at the root of your web server:

    Screen Shot of Unpacked EXTJS Files
    Screen Shot of Unpacked EXTJS Files
  3. Make sure your web server is running and open http://localhost/extjs/index.html in your browser.
  4. Click the View the Examples button.
  5. This is a good place to start to see what EXTJS is capable of.

At this point your ready to go. The Getting Started Guide has plenty of information to get your rolling and provide you will a decent knowledge set for EXTJS development.

You want to build something though right? So, let’s build.

  1. Create a directory named “extplay” in the root of your web server.
  2. In the extplay directory create a MyApp.html file.
    Usually EXTJS applications are contained in a single HTML file.
  3. Open the MyApp.html file in your text editor.
  4. Add the following HTML template code to your application:
    <!--<!DOCTYPE HTML>
            <title>EXTJS Getting Started: MyApp</title>
            <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
            <script type="text/javascript" src="/extjs/ext-all.js"></script>
            <script type="text/javascript" src="app.js"></script>
  5. You will notice the app.js file in the HTML above.
  6. Create the app.js file in your extplay directory and open it in your text editor.
  7. Now we can write some code for our simple application.
  8. Add the following code to the app.js file:
    Ext.onReady(function() {
     Ext.Msg.alert('Status', '<h1>Hello World!</h1>');
  9. Open MyApp.html (http://localhost/extplay/MyApp.html) in your browser. You should see something similar to the following image:

    Sencha EXTJS: Message Box
    The EXTJS Message Box
  10. This is not a full-on EXTJS application – this just illustrates how you can use pieces and parts of EXTJS when and how you’d like.
  11. Let’s create a EXTJS application.
  12. Open app.js.
  13. Replace the code in app.js with the following code:
       name: 'MyApp',
       launch: function() {
        Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
         title: 'EXTJS: MyApp',
         html : 'Hello World!'
  14. Open MyApp.html in a browser or refesh the browser if it is already open.
  15. You should see something similar to the following:

    Sencha EXTJS: EXTJS Barebones Application
    Sencha EXTJS: EXTJS Barebones Application
  16. Here is what is going on in the code example:
    1. Ext.application: Defines the application named “MyApp”
    2. launch: The built in launch event creates a Viewport and sets it’s config object with a layout and items.
    3. layout: Tells the Viewport to fit to the size of its parent (in this case the body of the HTML)
    4. items: defines the children of the viewport. In this case a title and some HTML.

Now you’ve got an EXTJS 4 application up and running. What do you think?

I’ll follow this post up with some more information on what really goes on with the application, creating and managing the “items” or children of your application & how Sencha handles dependancies and deployment.


4 Replies to “Sencha’s EXTJS 4: Getting Started Quickly”

  1. Aha , Exactly what I was looking for ,Great work did not know how to get it started.
    looking forward for many other post from you..
    Keep up the good work.

Leave a Reply to Harshwardhan Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.