How to select the file depending on the browser language in sencha touch 2? I have 3 files app_de.js, app_en-US.js and app_es.js under my project. I am finding the browser language and loading the file like this:
<script type="text/javascript" id="extlocale">
var browserLang = window.navigator.language; // get the browsers language
alert(browserLang);
var locale = 'en'; // default locale
if(browserLang == 'de' || browserLang == 'de-de') //called when the language is german
{
locale = 'de';
}
else if(browserLang == 'en-US' || browserLang == 'en-us' || browserLang == 'en')
{
locale = 'en-US'; //called when the language is english
}
else if(browserLang == 'es' || browserLang == 'es-es' )
{
locale = 'es'; //called when the language is spanish
}
else
{
console.log("Invalid language");
locale = 'en-US';
}
if(locale) {
Ext.fly('extlocale').set({src:'app_'+locale+'.js'});
}
</script>
The files will work individually if i include it this way:
<script type="text/javascript" src="app_en-US.js"></script>
Please let me know how to load the file depending on the browser's language?
You need a more cross-browser way of detecting browser language. There is no standard for it, but the following is a good try:
You also need a better way of mapping language codes to those you support. For example, shouldn’t de-AT be recognized and treated as de? What about en-GB? The simplest approach is to parse the language code so that you do
split('-')
and take the first part only. If your file needs to be en-US.js you would need to map en to en-US.I don’t know
Ext.fly()
, but just adding ascript
element is rather easy, even without a library. Just find a place for it in the document, dodocument.createElement('script')
, assignsrc
property to it, and put it into the document tree.Note that the browser language is the browser’s own idea of its own UI language and need not match the user’s preferences at all. It isn’t usually even controllable by the user, except that he may be able to decide which browser (and version thereof) he uses.
To load file depending on browser language in Sencha Touch 2, the best thing to do is to load a common file, and depending on browser language, load the contents.
And in the
locale.js
, depending on the language of browser, load the contents.Example with a login form:
From this, if the browser language is
en-US
it displays the English content, and if language is Hindi it displays the Hindi content.Here I used a simple switch case, but depending on your usability, modify it to meet your objective.