JSON file for multilanguage

Question

IDEA :
Having JSON file per language for my application. Load the right one depending on settings the user set.

How would it work? Would my app load every JSON file at launch or would it be loaded 'string' by 'string' as requested for display? Would it get too heavy of would it be slower than having a model for each language having fields for each displayable strings?

I plan on having 3 langs in my app.

thank you

Answer 1

If you are using JSON files for Language, you have to load it via Ajax and assign the data to a variable (say "Lang") to access the properties. Now, this will be problematic if you are using Lang values in your Views or Controllers config because these files may get loaded while the Ajax call is still in progress. Like the following case:

Ext.define('SomeView', {
  config : {
    ....
    html : Lang.someview.displatHtml,  // This will give "Lang is undefined" error
    ....
  }
});

So, I better advice you to use separate JS files for them. I mostly use a lang folder inside app directory and that includes all En.js, Fr.js etc. And the language object looks simple like this:

var LANG = {
  loading : 'Loading...'
} 

You can use a simple function like below to load this language file dynamically (before the app loads the app.js file). If you do not need to change it dynamically, just add a script at the top of your index.html.

// Load JS file dynamically
function loadJS(url){
  if(!url){ return; }

  var head= document.getElementsByTagName('head')[0],
  script= document.createElement('script');

  script.type= 'text/javascript';
  script.src= url;
  head.appendChild(script);
}

There is no point is using a Sencha Model for that. If you use a Model, you have to add a field each time you add a new language property. A simple json object like above will be suffice.