PDA

View Full Version : Apply locale dynamically



fabio.policeno
26 Mar 2012, 4:37 AM
Hello,

I'm trying to apply the translation system dynamically, where the user chooses a language and system reloads with the new labels this language. To have this file and file the application locale locale Ext JS. If changed from a static, manually changing the file named, the locales work perfectly. The problem is make it so dynamic. For example, when I choose the english language, perform the following action:



var url = 'locale/en.js';

Ext.Ajax.request({
url: url,
scope: me,
success: function(response) {
eval(response.responseText);
}
});


If helpful, use the locale this way:


Ext.define('Helper.Util', {
singleton : true,
yesValue : locale.yes,
...
});

Where my locale file has this structure:


locale = {
yes: 'Yes',
...
}

It works perfectly. The new locale file is loaded, if I use console.log (locale.yes), it shows me Yes, Yes that would be the locale pt_BR first loaded. Now the problem is: "What better way to recharge the components of the page with the new translation/with the new labels?". I saw the tutorial in the doc but I'm not mistaken, after loading the locale he recreates the components, all over again, but I found it kind of impossible.

Any ideas?

Thank's!

fabio.policeno
26 Mar 2012, 8:14 AM
I decided to start directly in html page using localStorage:

<script type="text/javascript">
var lang = localStorage ? (localStorage.getItem('lang') || 'pt_BR') : 'pt_BR',
localeExt = Ext.String.format('lib/extjs/locale/ext-lang-{0}-all.js', lang),
locale = Ext.String.format('locale/{0}.js', lang);

Ext.Ajax.request({
url : localeExt,
success: function(response) {
eval(response.responseText);
}
});

Ext.Ajax.request({
url : locale,
success: function(response) {
eval(response.responseText);
document.getElementById('loading-msg').innerHTML = locale.starting;
Ext.Ajax.request({
url : 'app.js',
success: function(response) {
eval(response.responseText);
}
});
}
});
</script>
But doLayout had tried on my login screen and did not work, maybe because I do not define my dentrdo the initComponent labels, but if doing this work, would not find it particularly nice to have to define all the text in initCOmponent of all classes to apply the locale of that content, also has the question that I'm using desktop interface, not tested but not sure if the use of doLayout work perfectly for desktop components or would have to do much manual. Anyway, the quickest solution I used was mentioned above, the question is whether it is a viable way or the best = /

Thanks;)

fabio.policeno
26 Mar 2012, 9:13 AM
Instead of Ajax, used the same idea of ??the bootstrap extjs:

(function() {
var lang = localStorage ? (localStorage.getItem('lang') || 'pt_BR') : 'pt_BR';
file = 'locale/' + lang + '-all.js';

document.write('<script type="text/javascript" src="' + file + '"></script>');
})();