sencha touch i18n 基础知识

发布于 2024-12-02 22:01:55 字数 141 浏览 1 评论 0原文

Sencha touch 中如何处理 i18n? (我说的是字符串的本地化支持,也包括本地化组件)

一个更具体的问题:我有一个包含日期选择器的表单,如何确保在访问时以欧洲格式显示和选择日期使用法国 Android 手机的应用程序?

干杯

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

薄暮涼年 2024-12-09 22:01:55

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/

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/

请你别敷衍 2024-12-09 22:01:55

对于您自己的字符串(不谈论本机触摸组件),您可以执行类似的操作。

1) 在 head 部分的 index.html 中,在

在您的 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 touch 代码中,例如搜索字段占位符值

xtype: 'searchfield',
id: 'searchToolbarItem',
placeHolder: myStrings.MyPackage1.myString1

希望它会有所帮助。

另一个解决方案可能是修改 sencha touch 应用程序的构建过程,并在构建应用程序时创建应用程序的本地化版本。所以每种语言都有一个版本。然后,根据浏览器语言,您将在浏览器中加载应用程序时加载正确版本的应用程序。

For your own strings (not talking about native touch component) you could do something like this.

1) In your index.html in the head section, load a LocaleManager.js file (whatever the name) before the

<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

In your localeManager, depending on your browser's language load the resource file corresponding to your language (myStrings-fr.js | myStrings-en.js )

You can do something like this to get the language in the browser:

window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage || window.navigator.systemLanguage

2) Create your resources files with your translated string

It should look like this for the english version (myStrings-en.js) :

var myStrings = {
MyPackage1: {
    myString1: 'Seach...'
}};

It should look like this for the french version (myStrings-fr.js) for example :

var myStrings = {
MyPackage1: {
    myString1: 'Recherchez...'
}};

3) In your sencha touch code, for example for a searchfield place holder value

xtype: 'searchfield',
id: 'searchToolbarItem',
placeHolder: myStrings.MyPackage1.myString1

Hope it will help.

Another solution could be to modify the build process of your sencha touch app and create localized versions of your app when building it. So there would be one version per language. Then depending on the brower language you would load the right version of your app when loading the app in the browser.

江心雾 2024-12-09 22:01:55

我编写了自己的 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

I wrote my own i18n class, here it is:

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;

    }
});

Then you can call it like this:

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)

For more information, you can read the original blog post here: http://zippy1978.tumblr.com/post/36131938659/internationalization-i18n-with-sencha-touch

海未深 2024-12-09 22:01:55

这是我的实现:

在此处输入图像描述

我希望根据设备的语言将我的应用程序翻译为英语和西班牙语,如果语言不是西班牙语,则采用默认值(英语)。
这是我的课程:

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

我希望它有帮助。

Here is my implementation:

enter image description here

I want me app to be translated to English and Spanish, based in the device's language, if the language is not Spanish, then it takes the default (English).
Here are my classes:

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'
});

And here is how you call it:

i18n.hello

I hope it helps.

心如狂蝶 2024-12-09 22:01:55

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

locale folder is under /src folder in sencha touch

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文