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
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/