sencha touch i18n 基础知识

Posted 2023-02-26

【中文标题】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 文件夹下