Ext JS - Learning Center

Manual:Advanced Application Design

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Advanced Application Design
Author: Ext community
Published: Unkown
Ext Version: 1.1
Languages: en.png English kr.png Korean

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

At the "advanced" level, all applications should be using an Ext.Viewport to encapsulate the HTML document body.

Your application object will be an augmented Viewport:

MyApp = function(){
    var count = 0; // Private Variable for the module. Not accessible from outside
    var increaseCount = function(){ // Private function. Not accessible from outside
        count++;
    };
 
    var navigationTree = new Ext.tree.TreePanel({
        region: 'west',
        loader: new Ext.tree.TreeLoader({
            url: 'getMenu.php'
        }),
        root: new Ext.tree.TreeNode({
            id: 'root'
        })
    });
 
    var centerRegion = new Ext.Container({
        region: 'center',
        autoEl: {tag: 'div'},
        layout: 'fit'
    });
 
//  What we return from this function is assigned to the MyApp object
//  The application is a Viewport with extra functions added
    return new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            height: 100,
            el: 'header-element-id'  // Incorporate existing header
        },
        navigationTree, centerRegion ],
 
//      The following properties comprise the apps public interface
        init : function(){ // Can be called from outside
            // Here comes the initialisation code
        },
 
        loadComponent: function(url) {
            // Your code to load a component into '''centerRegion'''
        },
 
        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 in the basic example, we get a public interface, but those public methods may access private variables and functions.

  • This page was last modified on 30 April 2009, at 23:35.
  • This page has been accessed 18,814 times.