Please give feedback on this localization approach

We have implemented several Ext JS applications in English, and the time has now come when we need to localize the applications for new markets. I have read the various localization documentation, but the standard approach of storing all localizable texts in object fields and overriding class prototypes to change language is not well suited to our applications. The reason is that we develop everything using Sencha Architect, meaning that while our localizable texts are stored in object fields, many of the objects are "anonymous" in that they are simply specified as config objects in an items array or similar.

As an example, consider the following excerpt which creates a radiogroup with 3 radio buttons:

Code:

{
    xtype: 'radiogroup',
    itemId: 'roleType',
    fieldLabel: 'Role types',
    labelSeparator: ' ',
    allowBlank: false,
    items: [
        {
            xtype: 'radiofield',
            name: 'roleType',
            boxLabel: 'Single',
            checked: true,
            inputValue: 'S'
        },
        {
            xtype: 'radiofield',
            name: 'roleType',
            boxLabel: 'Composite',
            inputValue: 'C'
        },
        {
            xtype: 'radiofield',
            name: 'roleType',
            boxLabel: 'Both',
            inputValue: 'B'
        }
    ]
}

There is no easy way in Architect to change the boxLabel attributes from fixed strings to a reference to something else. And even if this were trivial, it would require a great deal of work to go through the entire application and make those changes.

The approach I am currently prototyping requires no changes to these static texts in the application, but instead adds overrides to those UI classes that contain texts that require translation. Here is the override for Ext.form.field.Radio:

Code:

Ext.override(Ext.form.field.Radio, {
    constructor: function(config) {
        if (config && config.boxLabel && config.boxLabel.length > 0)
            config.boxLabel = translate(config.boxLabel);
        return this.callParent(arguments);
    }
});

The translate() method simply performs a lookup of the original English text in a JavaScript array, e.g.

Code:

translations = {
    'Single': 'Enkel',
    'Composite': 'Sammensat',
    'Both': 'Begge'
};

and returns the target language translation. The array declaration is loaded dynamically based on the user's language.

So far I have tested this for radio button texts, panel titles, and tab texts, and it works fine. I realize, of course, that there are quite a few classes to go through and write overrides for, and that there are cases that this particular approach does not cover such as dynamically generated texts. So this approach must be supplemented in certain parts of the application. However, I think the beauty of this approach is that it allows most of the application to remain untouched and remain simple to maintain. It also means that if the same text appears on e.g. both a button and a tab, then the text only needs to be translated once.

I do have two concerns:

1. What is the potential performance impact of these overrides?


2. Is this approach likely to prove brittle in the face of new Ext JS releases?

I welcome your comments and critiques.



Please give feedback on this localization approach