I'm using Ext JS 4.1 to create a CRM-type application. To connect to the server side, I'm using Ext Direct via the RemotingProvider
.
Before the application launches and renders, I want to retrieve some global variables from the server via Ext Direct, mainly the configured language of the currently logged in user and their configured permissions. Then, depending on the language of the user (from that result), I need to load both the Ext JS locale file and my own custom locale file. (Note that those must be loaded before any component is created, because they won't be applied afterwards.)
So, the procedure is:
- get Globals via
Ext.php.Globals.getGlobals
- get Ext locale via
Ext.loader.loadScript
, - get App locale via
Ext.loader.loadScript
- setup viewport
Since 1.-3. are asynchronous, I saw no other way than to nest the callbacks:
Ext.application({
name: 'MyApp',
launch: function() {
var app = this;
// Welcome to callback hell...
Ext.php.Globals.getGlobals(function(data) {
// insert globals into app namespace
Ext.apply(MyApp, data);
// load ext locale
Ext.Loader.loadScript({
url: 'ext/locale/ext-lang-'+MyApp.currentUser.culture.toLowerCase()+'.js',
onLoad: function() {
// load app locale
Ext.namespace('MyApp.locale');
Ext.Loader.loadScript({
url: 'app/locale/'+MyApp.currentUser.culture.toUpperCase()+'.js',
onLoad: function() {
// FINALLY, set up viewport
var viewport = Ext.create('MyApp.view.Viewport', {
controller: app
});
if (MyApp.util.hasPermission('usermgmt'))
app.getController('Locations');
// and so on ...
}
});
}
});
});
}
}); // end application
Is there any other, more elegant way to write this code? I know there are libraries for async flow, but can any of these work with the Ext JS API here? Or can I somehow force Ext.syncRequire
to load the locales for me (so I only have one layer of nesting for the getGlobals
call)? My own locales have a class defined, but Ext locales don't. Also, will this somehow mess up compiling the source files with Sencha Cmd?