ExtJS 4.0: Localization issues - extjs

Question

I followed closely guide on Localization: http://docs.sencha.com/ext-js/4-0/#!/guide/localization, however I cannot make it work in MVC pattern.
I don't need dynamic localization like previous example, I just want to set it when application loads.
I tried like this:
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'DailyReport', 'DP'],
launch: function() {
Ext.Ajax.request({
url: 'lib/ext-4.0/locale/ext-lang-es.js',
success: function(response, opts) {
eval(response.responseText);
},
failure: function() {
Ext.Msg.alert('Error', 'Error al cargar archivos de idioma.');
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'menu'
},
{
xtype: 'dpedit'
}]
});
}
});
In firebug I get: "Ext.view is undefined" error, and nothing renders. If I try Ajax call after creating Viewport, I don't get any error, but translation is not applied.

Answer 1

A more elegant solution would be to let the autoloader load the class before your launch method is run.
You can do this by define Ext.view.View as required:
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'DailyReport', 'DP'],
// This will make shure the class is loaded before your application runs:
requires : ['Ext.view.View'],
launch: function() {
Ext.Ajax.request({
url: 'lib/ext-4.0/locale/ext-lang-es.js',
success: function(response, opts) {
eval(response.responseText);
},
failure: function() {
Ext.Msg.alert('Error', 'Error al cargar archivos de idioma.');
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'menu'
},
{
xtype: 'dpedit'
}]
});
}
});
For more details refer to the extjs api

Answer 2

It will work in production mode, when all ext javascript files are loaded before your application start. I had this problem also. Try to do this to test: Import the 'ext-all.js' file and after that, import your language file. This will work. Not the best solution, but the only one I've found that works.
The cause of your problem:
If you open your translation file you will notice directives like this:
Ext.view.View.prototype.emptyText = "";
If the file 'Ext.view.View.js' isn't loaded in the moment that you load your translation file, you'll get an error, because the 'Ext.view.View' class didn't exists.
I hope anybody can help you with a better solution.

Answer 3

I solved this very easily. It's simple and it will work much better. Put this in your document head, after ext.js/ext-all.js, and before your app.js. (I put it at the bottom of the language.js per the localization guide)
var params = Ext.urlDecode(window.location.search.substring(1));
if (params.lang) {
var url = Ext.util.Format.format('/assets/extjs/locale/ext-lang-{0}.js', params.lang);
document.write("<script src='" + url + "'><\/script>");
}
I'm using the /assets to work with rails 3.1.
This facilitates the ?lang=fr in the query params, the rest of the app should work according to the guide.
http://docs.sencha.com/ext-js/4-0/#!/guide/localization