sencha touch i18n basics

Question

How is i18n handled within Sencha touch? (I am talking of localization support for strings, but also of localized components)

A more specific question: I have a form that contains a date picker, how do I make sure that the date will be displayed and picked in european format when I access the application using a french android phone?

Cheers

Answer 1

There isn't an official API for i18n in SenchaTouch, yet. Although in Ext 4 there are localization files for all components in the /locale folder.

There is an old tutorial that indicates a way, by dynamically in setting the src attribute of a script tag according to the locale.

<script type="text/javascript" id="extlocale"></script>
<script type="text/javascript">

var browserLang = window.navigator.language; // get the browsers language
var locales = [ 'fr', 'es', 'pt', 'pt-BR', 'pt-PT' ]; // available locale files
var locale = 'fr'; // default locale

// check browser language against available locale files
for (var i = locales.length - 1; i >= 0; i--) {
    if (browserLang === locales[i]) {
        locale = browserLang;
        break;
    }
};

// Insert src attribute to extlocale
if(locale) {
    Ext.fly('extlocale').set({src:'ext/locale/ext-lang-' + locale + '.js'});
}

</script>

Use window.navigator.language to check the browser's language.

Locale files must be set in /ext/locale/ext-lang-fr.js
Where you can override the components properties.

Ext.onReady(function() {

if(Date){
    Date.shortMonthNames = [
        "Janv",
        "Févr",
        "Mars",
        "Avr",
        "Mai",
        "Juin",
        "Juil",
        "Août",
        "Sept",
        "Oct",
        "Nov",
        "Déc"
    ];

    Date.getShortMonthName = function(month) {
        return Date.shortMonthNames[month];
    };

    Date.monthNames = [
        "Janvier",
        "Février",
        "Mars",
        "Avril",
        "Mai",
        "Juin",
        "Juillet",
        "Août",
        "Septembre",
        "Octobre",
        "Novembre",
        "Décembre"
    ];

    Date.monthNumbers = {
        "Janvier" : 0,
        "Février" : 1,
        "Mars" : 2,
        "Avril" : 3,
        "Mai" : 4,
        "Juin" : 5,
        "Juillet" : 6,
        "Août" : 7,
        "Septembre" : 8,
        "Octobre" : 9,
        "Novembre" : 10,
        "Décembre" : 11
    };

    Date.getMonthNumber = function(name) {
        return Date.monthNumbers[Ext.util.Format.capitalize(name)];
    };

    Date.dayNames = [
        "Dimanche",
        "Lundi",
        "Mardi",
        "Mercredi",
        "Jeudi",
        "Vendredi",
        "Samedi"
    ];

    Date.getShortDayName = function(day) {
        return Date.dayNames[day].substring(0, 3);
    };

    Date.parseCodes.S.s = "(?:er)";

    Ext.override(Date, {
        getSuffix : function() {
            return (this.getDate() == 1) ? "er" : "";
        }
    });
}

});

I made a working prototype you can check out here:
http://lab.herkulano.com/sencha-touch/date-picker-i18n/