From Learn About the Ext JavaScript Library

The most flexible and powerful way of designing a web application is to use the Module Pattern suggested by Douglas Crockford. You can find some resources here

module = function(){
    var count = 0; // Private Variable for the module. Not accessible from outside
    var increaseCount = function(){ // Private function. Not accessible from outside
        count++;
    };
 
    return {
        init : function(){ // Privileged method. Can be called from outside
            // Here comes the initialisation code
        },
        getCount : function(){ // Privileged method. Can be called from outside
            return count;
        },
        checkCount : function(){
            increaseCount();
            if (this.getCount() > 10)
                alert("count is greater than 10");
        }
    }
}();

As you can see that this pattern allows you incredible control over your JavaScript code. Now you can do something like this to call the getCount privileged method.

module.getCount();

But you cannot access the count variable or the increaseCount private method directly. However, you can access them inside the privileged methods, like we have used the increaseCount private method inside the checkCount privileged method.

A typical Ext application would look something like this.

module = function(){
    var count = 0; // Private Variable for the module. Not accessible from outside
    var increaseCount = function(){ // Private function. Not accessible from outside
        count++;
    }
 
    return {
        init : function(){ // Privileged method. Can be called from outside
            // Here comes the initialisation code
        },
        getCount : function(){ // Privileged method. Can be called from outside
            return count;
        },
        checkCount : function(){
            increaseCount();
            if (this.getCount() > 10)
                alert("count is greater than 10");
        }
    }
}();
Ext.onReady(module.init, module);

The last statement does two things: it executes the module.init method when the document has been completely loaded, and sets its scope to module. Setting the scope to module means you can call the checkCount method from inside init method like this:

init : function(){
    this.checkCount();
}

This much is sufficient to get you started with designing an Application in Ext. Please refer the Ext Documentation for more specific details.

See also

• Application Layout for Beginners Tutorial