Sencha localization

Question

I need to use localizations on sencha 1.1.1

//app-en.js

Locale = {
title: 'hello'

}

//app-fr.js

Locale = {
title: 'salut'

}

My panel.

var panel = new Ext.Panel({fullscreen: true, html: 'Text to locate'});

How can I detect the language and change it?

thanks in advance.

Answer 1

You want to localize your views using overrides. Take a look at this site for more information: http://www.ladysign-apps.com/developer/how-to-localize-your-sencha-touch-applications/

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    TAB_ONE_TITLE_SHORT: 'Hello',
    TAB_ONE_TITLE: 'Hello Sencha Touch 2',
    TAB_ONE_HTML: 'This app was written in English.',
    config: {
        tabBarPosition: 'bottom',
    },
    initialize: function() {

        var items = [{
                title: this.TAB_ONE_TITLE_SHORT,
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: this.TAB_ONE_TITLE
                },

                html: this.TAB_ONE_HTML
            }
        ];

        this.add(items);
        this.callParent();
    }
});

And the override

Ext.define('MyApp.utils.nl.Main', {
    override: 'MyApp.view.Main',

    TAB_ONE_TITLE_SHORT: 'Hallo',
    TAB_ONE_TITLE: 'Hallo Sencha Touch 2',
    TAB_ONE_HTML: 'Deze app is geschreven in het Nederlands.',
});

You can, as alternative, also include existing files using the loader class of the framework. This will be called before the app is launched:

Add your resource files to the app.json

"js": [
    {
      "path": "../touch/sencha-touch.js",
      "x-bootstrap": true
    },
    **{
      "path": "resources/translations/resources_nl.js",
      "remote": true
    },
    {
      "path": "resources/translations/resources_de.js",
      "remote": true
    },
    {
      "path": "resources/translations/resources_en.js",
      "remote": true
    },
    {
      "path": "resources/translations/resources_fr.js",
      "remote": true
    },**
    {
      "path": "app.js",
      "bundle": true,
      "remote": true
      /* Indicates that all class dependencies are concatenated into this file when build */
    }
],

My users can choose a language, i save that into the localstorage. My fallback is english. Here is my app.js where I use the Ext.Loader class to load the required language file

/*
 This file is generated and updated by Sencha Cmd. You can edit this file as
 needed for your application, but these edits will have to be merged by
 Sencha Cmd when it performs code generation tasks such as generating new
 models, controllers or views and when running "sencha app upgrade".

 Ideally changes to this file would be limited and most work would be done
 in other places (such as Controllers). If Sencha Cmd cannot merge your
 changes and its generated code, it will produce a "merge conflict" that you
 will need to resolve manually.
 */

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
});

**Ext.Loader.syncRequire(['resources/translations/*'], function() {
    Resources = Resources[localStorage.getItem('language') || 'EN'].texts;
});**

Ext.application({
    name: 'MyApp',

    requires: [],

    models: [],

    stores: [],

    views: [],

    controllers: [],

    launch: function() {
        ...
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

Here is an example of a language file (resources/translations/resources_en.js):

var Resources = Resources || {};

Resources.EN = {
    texts: {
        generic: {
            loading: "Load...",
            online: "Online",
            offline: "Offline",
            login: "Log in",
            logoff: "Log out",
            ...
        },
        list: {
            emptyText: "No elements have been found.",
            ...
        },
        map: {
            noMarkers: "There is no data to display on the map.",
            ...
        },
        settings: {
            scaleSize: "Scale screen?",
            ...
        },
        document: {
            openingDocumentFailed: "Opening document failed. Do you have an application that can open this type of document?",
            ...
        }
    }
}

The pros of this solution is that you now can use multilanguage text declarative in views:

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    items   : [
        {
            xtype: 'button',
            text : **Resources.generic.cancel**
        }
    ]
});

Answer 2

Load the suitable javascript file according to the locale. View this question or this question for a better idea.

Then just use the code this way:

var panel = new Ext.Panel({
   fullscreen: true, 
   html: Locale.title
});