Question

在Sencha touch中如何处理i18n？（我说的是对字符串的本地化支持，还有本地化组件的支持）

一个更具体的问题：我有一个包含日期选择器的表单，当我使用法国安卓手机访问应用程序时，如何确保以欧洲格式显示和选择日期？

干杯

Answer 1

SenchaTouch中没有i18n的官方API。虽然在Ext 4中有/ locale文件夹中所有组件的本地化文件。

通过根据区域设置动态设置脚本标记的src属性，有一个旧的tutorial表示方法。

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

Answer 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应用程序的构建过程，并在构建时创建应用程序的本地化版本。所以每种语言都会有一个版本。然后，根据更流行的语言，您可以在浏览器中加载应用程序时加载正确版本的应用程序。

Answer 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

Answer 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

我希望它有所帮助。

Answer 5

locale文件夹位于sencha touch的/ src文件夹下

sencha touch i18n基础知识

5 个答案: