Nice loader.
So far i came also to the conclusion to let Ext be the Controller/View part.
However, i load all the js modules in the main page.
To solve the issue getting php vars in the Js world (for example language translations for Titel, Header etc.), i get all module variables and language strings from the php world via an XHR call that populates an application wide JS data object.
So i ended up with a two stage init process:
1st stage:
- create a sort of semaphore (Ext.ux extension) that will be released later on (requires two release requests)
- create inline javascript that populates the application wide JS data object via XHR
- create a list for all modules and their js files and bild a main page in the php world
- load that main page
In the onReady event of the loader, i release the semaphore one time.
In the success handler that populates the global data object, i release the semaphore a second time.
Then the semaphore triggers the mainpage. (as if the mainpage would have invoked the onReadyEvent). This way i can be sure that all necessary data is available.
2nd stage:
Now the mainpage starts initilizing the modules. Also this is a two step process, because it could be, that modules depend on other modules to work.
So each module must provide an init and setup method (Where the setup is only rarely needed).
Here some example code, it is still in a design phase
The loader: Initializes the semaphore and populates the global data object.
// Start the loader
App.loader = new Ext.ux.Semaphore();
// make sure any subscriber has to wait for onReady
App.loader.acquire();
// make sure any subscriber has to wait for the following AJAX request to return succuessful
App.loader.acquire();
Ext.Ajax.request({
url : App.SiteUrl + '/main/get_params',
params : { action : 'get_init_param' },
waitMsg: 'Initializing, please wait...',
method: 'POST',
success: function(result, request) {
try {
AppData.Modules = Ext.util.JSON.decode(result.responseText);
}
catch(err) {
console.error('App.loader - Get_params: JSON decode Error');
alert('Loader: JSON Server Error!\n\n' + result.responseText);
return;
}
// release only on success
App.loader.release();
console.info('App.loader - Get_params: OK');
},
failure: function(result, request) {
var f = Ext.util.Format;
console.error('App.loader - Get_params: Server Error');
alert('Loader: Server Error!');
//Ext.MessageBox.alert('Server Failed', f.stripTags(result.responseText));
}
});
Ext.onReady(App.loader.release, App.loader);
console.info('App.loader: Done');
The main application script: Executes when the semaphore is finally released. Builds the applicationwide viewport, calls init and setup for each module and attaches any panel of a module to a "section".
NOTE: i removed the viewport part to make code better readable.
App.main = function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// Allow any Contentpanel to provide its own javascript and execute it
//Ext.UpdateManager.defaults.loadScripts = true;
// BUILD VIEWPORT HERE
// THE VIEWPORT CONTAINS ITEMS THAT CAN BE REFERENCED AS SECTIONS
// THE MODULES CAN ATTACH TO THESE SECTIONS
// apps section objects indexed by sectionName. Section is any container like a panel or tabpanel inside a region
// define the sections that can be referenced by any module
App.sections = {};
// section can be any name like "mainmenu" or "central-overview. For testing use the corresponding regionnames
App.sections['south'] = Ext.getCmp('south-panels');
App.sections['south'] = Ext.getCmp('south-panels');
App.sections['east'] = Ext.getCmp('east-panels');
App.sections['center'] = Ext.getCmp('center');
App.sections['west'] = Ext.getCmp('west');
console.info('App.main: Done');
App.Utils.ModuleMgr.initModules();
console.info('App.main - initModules: Done');
App.Utils.ModuleMgr.setupModules();
console.info('App.main - setupModules: Done');
// Setup all panels for the given module
App.Utils.ModuleMgr.showModulePanels(App.Modules.currentuser);
App.Utils.ModuleMgr.showModulePanels(App.Modules.welcome);
};
App.loader.on('unlock', App.main, App, {single: true});
Here a simple module:
/* Note: each module can return multiple panels!
* Panel config should contain:
* id:'m-welcome-testpanel', // id of this component
* sectionName: 'center', // section to use in main layout
* activate: true, // should this panel be shown (if the module returns more than one panel for a section)
* closable: true, // can the user close this panel? (NOTE: this requires actually to add the panel in a tabpanel everytime)
* closeAction: 'hide', // when the user close, only hide the panel - do not destroy it!
*
*/
App.Modules.welcome = function(){
var welcomePanel, testPanel;
return {
name:'Welcome',
/**********************************************************************/
init: function(){
console.info("Welcome.init: Done");
},
/**********************************************************************/
setup: function() {
// must be defined. Will be called from App.main after init()
console.info("Welcome.setup: Done");
},
/**********************************************************************/
getPanels: function(panelId){
// welcome panel
if (!welcomePanel){
welcomePanel = new Ext.Panel({
id: 'm-welcome-panel', // id of this component
contentEl: 'm-welcome', // id of existing element to use as body
title: 'Welcome Box',
sectionName: 'west',
activate: true,
closable: true,
closeAction: 'hide',
autoScroll: false
});
}
if (panelId && welcomePanel.id == panelId) {
return [welcomePanel];
}
// testpanel panel
if (!testPanel){
testPanel = new Ext.Panel({
id: 'm-welcome-testpanel', // id of this component
html: '<h1>welcome testpanel</h1><p> bla vla </p>',
sectionName: 'center',
activate: true,
title: 'Welcome Box Test',
closable: true,
closeAction: 'hide',
autoScroll: false
});
}
if (panelId && testPanel.id == panelId) {
return [testPanel];
}
// return all panels
if (panelId) {
console.error('Welcome: Error requested unknown panel:%s', panelId);
return false;
}
return [welcomePanel, testPanel];
} // getPanels
} // return
}();
I still need to clean up some areas of the code to move all stuff to a.) and get rid of any HTML. Also i am looking to get the configuration itself via the backend (php world). That is where the global data object comes into play that is populated, before the modules get initialized.
Puh what a long posting....;)