| Summary: Advanced Application Design |
| Author: Ext community |
| Published: Unkown |
| Ext Version: 1.1 |
Languages: English 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.