Web Technology: A Revolution

Anyone new to using the Ext library or trying to learn more about it has come to the right place. This tutorial will walk through Ext basic concepts and how to get a dynamic page up and running quickly. It is assumed that the reader has some Javascript experience and a basic understanding of the HTML document object model (DOM).

Download Ext

If you haven’t done so already, you’ll first want to download the most current Ext release which can always be found here: http://extjs.com/download.

Get Started

We’re going to walk through some of the most common tasks that people have to accomplish in Javascript and how to perform them using Ext. Ext.onReady is probably the first method that you’ll use on every page. This method is automatically called once the DOM is fully loaded, guaranteeing that any page elements that you may want to reference will be available when the script runs.

Responding to Events

In the above example, code we’ve written has been directly inside the onReady function, which means that it always executes immediately after the page loads. This doesn’t give us much control—you will most commonly want your code to execute in response to specific actions or events that you choose to handle. To do this, you define event handlers that can respond to events using functions that you assign.

Let’s start off with a simple example. Open up ExtStart.js and edit it so that your code looks like this:

Ext.onReady(function() {

      Ext.get('myButton').on('click', function(){

            alert("You clicked the button");

      });

});

Not surprisingly, Element.select allows you to do the same thing, but with an entire group of Elements at once. For example, to show our message when any paragraph in our test page is clicked, we could do this:

Ext.onReady(function() {

      Ext.select('p').on('click', paragraphCLick); 

        var paragraphCLick(e) {

            alert("You clicked a paragraph");

      }

});