Sencha Touch 2 MVC - Ajax requests before Application initialisation

Question

Because Sencha Touch lacks an official way doing internationalization I'm writing my own small set of utility methods. I don't won't to embed another lib like jQuery to use already existing i18n plugins. At the moment I'm in trouble figuring out the best way. Currently I've a class implemented as a Singleton. In the constructor I determine the language and load the corresponding language file. At the moment I'm using Sencha methods and define a model and load the data (json) into a store. I think it's kind of convenient. Here a snippet from the constructor where I load the data:

        Ext.define('Translation', {
        extend: 'Ext.data.Model',
        idProperty: 'key',
        fields: [
            {name: 'key', type: 'string'},
            {name: 'translation', type: 'string'}
        ],
        proxy: {
            type: 'ajax',
            url: 'res/translation-'+lang+'.json', 
            //appendId: false,
            reader: {
                type: 'json',
            }
        }
    });

    _store = Ext.create('Ext.data.Store', {
        model   : 'Translation',
        autoLoad: true
    });

The problem here is that the load is async (no way doing a synchronous call with sencha?!) which means that the application may start to load before this stuff is finished. I need the data because the views rely on it.

Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
controllers: ['Ctr1', 'Ctr2'],
models: ['Model1', 'Model2],
init: function() {

},
launch: function() {

}
});

The only solutions I've found so far would be

1. use a callback and wrap the app initialization inside.
2. Don't use Sencha and do the ajax request stuff manually.
3. Don't use Ajax at all. Put translations for all languages into a javascript file, include it in index.html and make sure the utility class has access to the object.

Answer 1

There is already an i18N extension have a look here.

https://github.com/elmasse/Ext.i18n.Bundle-touch

Answer 2

See this post this could help : sencha touch i18n basics

And my answer,, maybe it could help you.

For your own strings (not talking about native touch component) you could do something like this.

1) In your index.html in the head section, load a LocaleManager.js file (whatever the name) before the

<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

In your localeManager, depending on your browser's language load the resource file corresponding to your language (myStrings-fr.js | myStrings-en.js )

You can do something like this to get the language in the browser:

window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage || window.navigator.systemLanguage

2) Create your resources files with your translated string

It should look like this for the english version (myStrings-en.js) :

var myStrings = {
MyPackage1: {
    myString1: 'Seach...'
}};

It should look like this for the french version (myStrings-fr.js) for example :

var myStrings = {
MyPackage1: {
    myString1: 'Recherchez...'
}};

3) In your sencha touch code, for example for a searchfield place holder value

xtype: 'searchfield',
id: 'searchToolbarItem',
placeHolder: myStrings.MyPackage1.myString1

Hope it will help.

Another solution could be to modify the build process of your sencha touch app and create localized versions of your app when building it. So there would be one version per language. Then depending on the brower language you would load the right version of your app when loading the app in the browser.

Answer 3

There is no easy way to do this with Sencha Touch. Your best bet would be to make an synchronous Ajax request for a json file with translations, and then let your application launch after that.