Как перевести элементы в ExtJS? - PullRequest
Новая
       29

Как перевести элементы в ExtJS?

1 голос
/ 30 апреля 2019

Я использую ExtJS и добавил некоторые элементы, такие как указатель даты, кнопки ... Я хотел бы перевести эти элементы на свой родной язык, поскольку по умолчанию они на английском.

Я искал околои я обнаружил, что у меня должны быть файлы для интернационализации, но у меня их нет, поскольку у меня есть только эти два файла:

index.html

<html> 
  <head>
        <!-- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Test</title>

        <!-- CDN 4.2.1- NEPTUNE -->
        <link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />
        <script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
        <link href="http://cdn.sencha.io/ext/gpl/4.2.1/resources/css/ext-all-neptune.css" rel="stylesheet" />

        <!-- JScript -->
        <script type="text/javascript" src="/assets/js/app.js"></script>
    </head>

    <body>
    </body>

</html>

app.js

    Ext.application({
        name: 'MyApp',
        launch: function() {            
            const datePickers = Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                width: 300,
                bodyPadding: 10,
                items: [{
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    anchor: '100%',
                    fieldLabel: 'Check In:',
                    name: 'from_date',
                    minValue: new Date(),
                    listeners: {
                        'change': function(me) {

                        }
                    }
                }, {
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    anchor: '100%',
                    fieldLabel: 'Check Out:',
                    name: 'to_date',
                    minValue: new Date(),
                    listeners: {
                        'change': function(me) {

                        }
                    }
                }]
            });

            Ext.create('Ext.container.Viewport', {
                items: [{
                    title: 'Y',
                    region: 'west',
                    collapsible: true,
                    split: true,
                    titleCollapse: true,
                    items: [{
                        items: datePickers
                    }],
                }]
            });
        }
    });

Итак, как вы видите, английский является языком по умолчанию для тех, кто выбирает даты:

Есть ли способ перевести их на нужный язык?Мне нужно будет только перевести месяц и кнопку «сегодня», но если будет полный перевод, было бы лучше.

Заранее спасибо

1 Ответ

2 голосов
/ 30 апреля 2019

Вы можете сделать это просто, переопределив Ext.picker.Date. Просто замените Ext.locale.en.picker.Date на ваше имя, например. Ext.locale.pl.picker.Date и измените параметры, как показано ниже: 

Ext.define("Ext.locale.en.picker.Date", {
    override: "Ext.picker.Date",
    todayText: "Today",
    minText: "This date is before the minimum date",
    maxText: "This date is after the maximum date",
    disabledDaysText: "",
    disabledDatesText: "",
    nextText: 'Next Month (Control+Right)',
    prevText: 'Previous Month (Control+Left)',
    monthYearText: 'Choose a month (Control+Up/Down to move years)',
    todayTip: "{0} (Spacebar)",
    format: "m/d/y",
    startDay: 0
});

Чтобы перевести другие строки даты: 

if (Ext.Date) {
    Ext.Date.monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

    Ext.Date.getShortMonthName = function (month) {
        return Ext.Date.monthNames[month].substring(0, 3);
    };

    Ext.Date.monthNumbers = {
        January: 0,
        Jan: 0,
        February: 1,
        Feb: 1,
        March: 2,
        Mar: 2,
        April: 3,
        Apr: 3,
        May: 4,
        June: 5,
        Jun: 5,
        July: 6,
        Jul: 6,
        August: 7,
        Aug: 7,
        September: 8,
        Sep: 8,
        October: 9,
        Oct: 9,
        November: 10,
        Nov: 10,
        December: 11,
        Dec: 11
    };

    Ext.Date.getMonthNumber = function (name) {
        return Ext.Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
    };

    Ext.Date.dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

    Ext.Date.getShortDayName = function (day) {
        return Ext.Date.dayNames[day].substring(0, 3);
    };

    Ext.Date.parseCodes.S.s = "(?:st|nd|rd|th)";

    Ext.Date.firstDayOfWeek = 0;
    Ext.Date.weekendDays = [6, 0];
}

Чтобы изменить заголовок месяца на 3 буквы, вам нужно изменить renderTpl в Ext.picker.Date.

Сделайте что-нибудь подобное: 

Ext.define('Ext.override.picker.Date', {
    override: "Ext.picker.Date",
    getDayInitial: function (value) {
        return value.substr(0, 3);
    }
});

Изменена функция getDayInitial для отображения 3 букв.

...