sencha touch i18n 基础知识
Posted
技术标签:
【中文标题】sencha touch i18n 基础知识【英文标题】:sencha touch i18n basics 【发布时间】:2011-09-06 10:27:25 【问题描述】:如何在 Sencha touch 中处理 i18n? (我说的是对字符串的本地化支持,还有本地化组件)
一个更具体的问题:我有一个包含日期选择器的表单,当我使用法国安卓手机访问应用程序时,如何确保日期以欧洲格式显示和选择?
干杯
【问题讨论】:
【参考方案1】: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');似乎对我不起作用。你能帮我解决这个问题吗?【参考方案2】:对于你自己的字符串(不是说原生触摸组件)你可以做这样的事情。
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 元素添加到您的页面。【参考方案3】:我写了自己的 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
【讨论】:
【参考方案4】:这是我的实现:
我希望我的应用程序根据设备的语言翻译成英语和西班牙语,如果语言不是西班牙语,则采用默认语言(英语)。 这是我的课程:
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
希望对你有帮助。
【讨论】:
【参考方案5】:locale 文件夹在 sencha touch 的 /src 文件夹下
【讨论】:
以上是关于sencha touch i18n 基础知识的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 sencha-touch.jsb3 构建 Sencha Touch?
Sencha Touch实战OA系统开发|Sencha Touch项目教程
Sencha Touch - sencha touch js 大小的性能问题
将 Sencha Architect 项目从 Sencha Touch v2.0.x 更新到 Sencha Touch 2.1.x