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

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.