【发布时间】：2011-09-06 10:27:25
【问题描述】：
如何在 Sencha touch 中处理 i18n？ （我说的是对字符串的本地化支持，还有本地化组件）
一个更具体的问题：我有一个包含日期选择器的表单，当我使用法国安卓手机访问应用程序时，如何确保日期以欧洲格式显示和选择？
干杯
【问题讨论】：
标签： internationalization sencha-touch
【发布时间】：2011-09-06 10:27:25
【问题描述】：
SenchaTouch 中还没有针对 i18n 的官方 API。尽管在 Ext 4 中，/locale 文件夹中的所有组件都有本地化文件。
有一个旧的tutorial 表示方法，通过根据语言环境动态设置脚本标记的src 属性。
<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>
使用 window.navigator.language 来检查浏览器的语言。
必须在 /ext/locale/ext-lang-fr.js 中设置语言环境文件
您可以在哪里覆盖组件属性。
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" : "";
}
});
}
});
我制作了一个工作原型，您可以在这里查看：
http://lab.herkulano.com/sencha-touch/date-picker-i18n/
【讨论】：
-
Ext.fly('extlocale').set({src:'ext/locale/ext-lang-' + locale + '.js'});似乎对我不起作用。你能帮我解决这个问题吗？
对于你自己的字符串（不是说原生触摸组件）你可以做这样的事情。
1) 在 head 部分的 index.html 中，在
之前加载一个 LocaleManager.js 文件（无论名称如何）<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
在您的 localeManager 中，根据浏览器的语言加载与您的语言对应的资源文件 (myStrings-fr.js | myStrings-en.js )
您可以执行以下操作来获取浏览器中的语言：
window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage || window.navigator.systemLanguage
2) 使用翻译后的字符串创建资源文件
英文版 (myStrings-en.js) 应该是这样的：
var myStrings = {
MyPackage1: {
myString1: 'Seach...'
}};
例如，法语版本 (myStrings-fr.js) 应该如下所示：
var myStrings = {
MyPackage1: {
myString1: 'Recherchez...'
}};
3) 在您的 sencha 触摸代码中，例如用于搜索字段占位符值
xtype: 'searchfield',
id: 'searchToolbarItem',
placeHolder: myStrings.MyPackage1.myString1
希望它会有所帮助。
另一种解决方案可能是修改 sencha touch 应用的构建过程，并在构建时创建应用的本地化版本。因此，每种语言都会有一个版本。然后根据浏览器语言，在浏览器中加载应用程序时，您将加载正确版本的应用程序。
【讨论】：
-
嗨罗南，这是我一直在寻找的。请问你有 LocaleManager.js 的实现吗？谢谢。丽莎
-
对不起，我不能给你密码。您只需要使用 JQuery 以 myStrings-XX.js 作为 src 将新的 Script 元素添加到您的页面。
我写了自己的 i18n 类，这里是：
Ext.define('MyApp.util.I18n', {
singleton : true,
config : {
defaultLanguage : 'en',
translations : {
'en' : {
'signIn' : 'Sign in',
'name' : 'Name',
'hello' : 'Hello {0} !',
'enOnly' : 'English only !'
'fr' : {
'signIn' : 'Identifiez-vous',
'name' : 'Nom',
'hello' : 'Bonjour {0} !'
}
}
},
constructor: function(config) {
this.initConfig(config);
this.callParent([config]);
},
translate: function (key) {
// Get browser language
var browserLanguage = window.navigator.userLanguage || window.navigator.language;
// Is it defined ? if not : use default
var language = this.getTranslations()[browserLanguage] === undefined ? this.getDefaultLanguage() : browserLanguage;
// Translate
var translation = "[" + key + "]";
if (this.getTranslations()[language][key] === undefined) {
// Key not found in language : tries default one
if (this.getTranslations()[this.getDefaultLanguage()][key] !== undefined) {
translation = this.getTranslations()[this.getDefaultLanguage()][key];
}
} else {
// Key found
translation = this.getTranslations()[language][key];
}
// If there is more than one argument : format string
if (arguments.length > 1) {
var tokenCount = arguments.length - 2;
for( var token = 0; token <= tokenCount; token++ )
{
translation = translation.replace( new RegExp( "\\{" + token + "\\}", "gi" ), arguments[ token + 1 ] );
}
}
return translation;
}
});
那么你可以这样称呼它：
MyApp.util.I18n.translate('signIn');
// Gives 'Identifiez-vous'
MyApp.util.I18n.translate('hello', 'Gilles');
// Gives 'Bonjour Gilles !'
MyApp.util.I18n.translate('enOnly');
// Gives 'English only !' (defaults to en, as the key is not defined for fr)
MyApp.util.I18n.translate('missing');
// Gives '[missing]' (the key is never defined, so it is returned into brackets)
有关更多信息，您可以在此处阅读原始博客文章：http://zippy1978.tumblr.com/post/36131938659/internationalization-i18n-with-sencha-touch
【讨论】：
这是我的实现：
我希望我的应用程序根据设备的语言翻译成英语和西班牙语，如果语言不是西班牙语，则采用默认语言（英语）。 这是我的课程：
Ext.define('MyApp.i18n.I18N', {
alternateClassName: 'i18n',
singleton: true,
constructor: function(config) {
var lang = window.navigator.userLanguage || window.navigator.language
if(lang==='undefined' || lang.substring(0,2) != 'es'){ //don't care about region
lang = 'defaultLocale';
}
return Ext.create('MyApp.i18n.locales.' + lang, config);
}
});
Ext.define('MyApp.i18n.locales.defaultLocale', {
hello:'Hello'
});
Ext.define('MyApp.i18n.locales.es', {
extend: 'MyApp.i18n.locales.defaultLocale',
hello:'Hola'
});
你是这样称呼它的：
i18n.hello
希望对你有帮助。
【讨论】：
locale 文件夹在 sencha touch 的 /src 文件夹下
【讨论】：