CODEWITHSUNDEEP
extjslocalizationextjs4
Milan
Milan

Reputation: 1019

ExtJS 4.0: Localization issues

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.

Upvotes: 0

Views: 4577

Answers (3)

Jeff Moss
Jeff Moss

Reputation: 26

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

Upvotes: 0

suknic
suknic

Reputation: 645

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

Upvotes: 1

Jaison Erick
Jaison Erick

Reputation: 645

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.

Upvotes: 0

Related Questions