Created some base interface classes that implements Application architecture into ExtJS script.
Base function of this architecture is:
Inckudes structure:
<script src="/libraries/extjs/adapter/ext/ext-base.js" type="'text/javascript'"><!--mce:0--></script> <script src="/libraries/extjs/ext-all.js" type="'text/javascript'"><!--mce:1--></script> <!--Interface classes--> <script src="/app/lib/app.js" type="'text/javascript'"><!--mce:2--></script> <script src="/app/lib/module.js" type="'text/javascript'"><!--mce:3--></script> <!--Application classes--> <script src="/app/application.js" type="'text/javascript'"><!--mce:4--></script> <script src="/app/modules/tasks.js" type="'text/javascript'"><!--mce:5--></script>
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();
Оставить комментарий
Вы должны войти, что бы оставить комментарий.