CODEWITHSUNDEEP
extjslocalizationextjs6extjs6-classicextjs6.2
Andy Infin
Andy Infin

Reputation: 421

Ext JS 6.2.0 localization overrides don't work

I'm working on Ext JS MVC app, that needs to be localized. Trying to reproduce official docs (http://docs.sencha.com/extjs/6.2.0/guides/core_concepts/localization.html). Locale file load correctly.

Console message:

[W] Overriding existing mapping: 'viewmodel.users' From 'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'. Is this intentional?

but overriding values don't display (they should be grid columns headers.

Model looks like this:

Ext.define('clt.view.users.UsersModel', {
    extend: 'Ext.app.ViewModel',
    requires:[
        // something
    ],
    // singleton: true,
    data: {
        key1: 'value1',
        key2: 'value2',
        keyN: 'valueN',
    },
    stores: {
        // something
    }
});

Values binding to view like this:

bind: { text: '{key1}' }

If I make this model singleton, localization starts working (grid headers displayed localized values), but grid data is empty. So, what's the problem? Help me understanding it.

Update. Problem resolved. I found thread on Sencha forum with solution: add localized elements in config object in localization file. Example:

Ext.define('clt.locale.en.view.users.UsersModel', {
    override: 'clt.view.users.UsersModel',
    config: {
        data: {
            key1: 'value1',
            // some other keys
        }
    }
});

Upvotes: 2

Views: 909

Answers (1)

Alexander
Alexander

Reputation: 20234

Warnings are not a good sign. In your case, you don't apply an override like you should. The message

[W] Overriding existing mapping: 'viewmodel.users' From 'clt.locale.en.view.users.UsersModel' to 'clt.view.users.UsersModel'. Is this intentional?

says that first, clt.locale.en.view.users.UsersModel (your localized version) is loaded, and after that, clt.view.users.UsersModel (non-localized version) is loaded and completely replaces the localized version.

What you want to do is the following:

Ext.define('clt.view.users.UsersModel', {
    extend: 'Ext.app.ViewModel', // <- EXTEND ViewModel class
    // define your locale-agnostic user model here
});


Ext.define('clt.locale.en.view.users.UsersModel', {
    override: 'clt.view.users.UsersModel', // <- OVERRIDE implementation in the overridden class
    // define your localized properties here.
});

This should remove the warning. Then you can instantiate the UsersModel

Ext.create('clt.view.users.UsersModel', {

but you get a localized version of it.

Upvotes: 1

Related Questions