ExtJs Example Architecture

extjs-example-architecture.js

//App abstract class:
App = function(cfg){
    Ext.apply(this, cfg);
    this.addEvents({
        'ready' : true,
        'beforeunload' : true
    });
 
    Ext.onReady(this.initApp, this);
};
 
Ext.extend(App, Ext.util.Observable, {
 
    isReady: false,
    modules: {},
 
    initApp : function(){
 
        //Modules must add themself to application
        this.init();
 
		this.initModules();
 
        Ext.EventManager.on(window, 'beforeunload', this.onUnload, this);
		this.fireEvent('ready', this);
        this.isReady = true;
 
    },
 
    getModules : function(){
		return this.modules;
	},
 
    init : Ext.emptyFn,
 
    initModules : Ext.emptyFn,
 
    start : Ext.emptyFn,
 
	addModule : function(module) {
		this.modules[module.id] = module;
	},
 
    getModule : function(id){
    	var ms = this.modules;
 
    	if(ms[id]) return ms[id];
 
        return false;
    },
 
    onReady : function(fn, scope){
        if(!this.isReady){
            this.on('ready', fn, scope);
        }else{
            fn.call(scope, this);
        }
    },
 
	onUnload : function(e){
        if(this.fireEvent('beforeunload', this) === false){
            e.stopEvent();
			this._desctruct();
        }
    },	
 
	_desctruct : function(){
 
    }
});

//Module abstract class:
App.Module = function(cfg){
    Ext.apply(this, cfg);
    App.Module.superclass.constructor.call(this);
    this.addEvents({
        'ready' : true,
        'beforeunload' : true
    });
}
 
Ext.extend(App.Module, Ext.util.Observable, {
 
	id : '',						// linking name in Application
	title : '',
	description : '',
	icoCls : '', 					// used for button
	logoCls : '', 					// used for logo	
 
	app : null,						//backlink to Application
 
    init : Ext.emptyFn,
 
	start : Ext.emptyFn,
 
	onReady : function(fn, scope){
        if(!this.isReady){
            this.on('ready', fn, scope);
        }else{
            fn.call(scope, this);
        }
    },
 
	onUnload : function(e){
        if(this.fireEvent('beforeunload', this) === false){
            e.stopEvent();
			this._desctruct();
        }
    },	
 
	_destruct : Ext.emptyFn
 
});
//Application class:
Application = new App({
 
	init :function(){
		Ext.QuickTips.init();
		console.log('Application started');
	},
 
	initModules : function(){
		for(var i in this.modules){
            var m = this.modules[i];
            m.app = this;  //backlink
			m.init();
        }
		this.start();
		this.isReady = true;
    },
 
	start : function(){
		this.getModule('tasks').start();
	}
 
});
//Tasks module class:
Application.Tasks = function(cfg){
    Ext.apply(this, cfg);
    Application.Tasks.superclass.constructor.call(this);
    Application.addModule(this);
}
 
Ext.extend(Application.Tasks, App.Module, {
 
	id : 'tasks',						// linking name in Application
	title : 'Tasks',
	description : 'Task for managment',
	icoCls : 'task-ico', 					// used for button
	logoCls : 'task-logo', 					// used for logo	
 
    init : function(){
 
	},
 
	start : function(){
		console.log('Tasks started');
	},
 
	_destruct : Ext.emptyFn
 
});
new Application.Tasks();