Sencha Touch I18N Основы

Question

Как i18n обрабатывается в приложении Sencha touch?(Я говорю о поддержке локализации для строк, но также и для локализованных компонентов)

Более конкретный вопрос: у меня есть форма, которая содержит средство выбора даты, как мне убедиться, что дата будет отображаться и выбиратьсяв европейском формате, когда я получаю доступ к приложению с помощью французского телефона Android?

Ура

Answer 1

Официального API для i18n в SenchaTouch пока нет.Хотя в Ext 4 есть файлы локализации для всех компонентов в папке / locale.

Существует старое учебное пособие , в котором указывается путь путем динамической установки атрибута src тега scriptв зависимости от локали.

<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) В ваш index.html в разделе head загрузите файл 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 и создание локализованноговерсииваше приложение при его создании.Таким образом, будет одна версия для каждого языка.Затем, в зависимости от языка браузера, вы загружаете правильную версию своего приложения при загрузке приложения в браузере.

Answer 3

Вот моя реализация:

Я хочу, чтобы мое приложение было переведено на английский и испанский языки на основе языка устройства. Если язык не испанский, то он принимает значение по умолчанию (английский). Вот мои занятия:

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 4

Я написал свой собственный класс 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 5

языковая папка находится в папке / src в sencha touch