Phonegap/Sencha Language Localization

I've finished this language localization plugin. It's not amazing, but it worked better than I originally speculated. Here are the short answers to each of the questions.

1- Is there an easier way to implement language localization with my setup?

Not that i'm aware of. The comment by Stuart provided this link Sencha-touch localization. Use a store or a global JSON object? which had some good information on one way that you can use class overrides. I didn't like this approach, because it spread my language translations into different classes. But certainly, if you are doing something simple, or you want something that could be more powerful, perhaps you should investigate that.

2- Will I run into issues with native sencha stuff (like datepickers)?

I ended up specifically leaving "datepickers" in english for now. But everything else was really relatively easy to customize. Almost every graphical UI element can have it's text altered.

3- When loading/reloading language json files, will I have performance issues (require a webview reload?, sencha object resizing issues, etc).

The method that i employed (see below) worked exceptionally well in regards to performance. The one issue that you have is right when you switch the languages, you need that specific page to reload. Sencha handled resizing without any flaws, except where I had been foolish and statically set sizes.

Some of what I did was described in edits to the question. Here is a detailed overview of my solution. (warning, it's not the most elegant solution.)

Instead of using a pure JSON file, I ended up just using a javascript function. This isn't the greatest solution because it requires some minimal maintenance, but JSON parsing with phonegap/sencha isn't the best. (I get JSON files from translater's, and quickly paste into the javascript file. Takes around 2 minutes, see further explanation below).

Language.js

function setLanguage(language){    if(language == "en")    {        //console.log("inside if Language == en");        GlobalLanguage.CurrentLanguage = language;        GlobalLanguage.ID = {"glossary": [        {               //CONVERTED JSON            about : 'About',            checking_for_updates : 'Checking for updates...(This may take a few minutes.)'            //Any additional translations        }        ]};    }    if (language == "es"){        //console.log("inside language == es");        GlobalLanguage.CurrentLanguage = language;        GlobalLanguage.ID = {"glossary": [            {            //CONVERTED JSON            about : 'Acerca de ',            checking_for_updates : 'Verificando actualizaciones... (Capas que demore algunos minutos).'            //Any additional translations        }]};    }        if (language == "pt"){        //console.log("inside language == pt");        GlobalLanguage.CurrentLanguage = language;        GlobalLanguage.ID = {"glossary": [            {             //CONVERTED JSON              about : 'Sobre',              checking_for_updates : 'Verificando se há atualizações... (pode demorar alguns minutos.)'              //Any additional translations        }]};    }}

As you can see, this file allows for 3 languages (Portugese, English, and Spanish). After setting the language, you could access each localized string anywhere in your object. For example, if you need to access the word "about" simply use:

GlobalLanguage.ID.glossary[0]["about"]

This will access the GlobalLanguage object which will have whatever language loaded into the properties. So throughout your project, you could have these calls. However, I'd recommend taking it one step further

function langSay(languageIdentifier){   // console.log("inside langSay");    if(!GlobalLanguage.ID.glossary[0][languageIdentifier]){        return "[! LANGUAGE EXCEPTION !]";    }    else{        return GlobalLanguage.ID.glossary[0][languageIdentifier];    }}

This protects you from having language exceptions and having your program crash without knowing where (you may have hundreds or thousands of properties being set in that language.js file). So now simply :

langSay("about")

One additional note about formatting from JSON. The format you want your language files in is:

languageIdentifier : 'Translation',languageIdentifier : 'Translation',languageIdentifier : 'Translation'

I used Excel for the formatting. Also the languageIdentifiers are unique identifiers without spaces. I recommend just using Excel to format first 3 to 4 words word1_word2_word3_word4 of the english translation.

word1_word2_word3 : 'word1 word2 word3'

Hope this helps you out! I'd be happy to respond to any questions