CODEWITHSUNDEEP
extjsextjs4.2
user10021033
user10021033

Reputation:

How to translate the items in ExtJS?

I am using ExtJS and I added some items such as pickerdate, buttons... I would like to translate those items into my native language since by default they are in English.

I have been searching about it and I found that I should have files for internationalization, but I do not have them since I do only have these two files:

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
                    }],
                }]
            });
        }
    });

So as you can see, English is the default language for those datepickers:

Is there a way to translate them into a desired language? I would only need to translate the month and the "today" button but if there is a complete translation, it would be better.

Thanks in advance

Upvotes: 1

Views: 1352

Answers (1)

norbeq
norbeq

Reputation: 3076

You can do it simple by override the Ext.picker.Date. Just change Ext.locale.en.picker.Date to your name eg. Ext.locale.pl.picker.Date and change parameters like below:

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

To translate other date strings:

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];
}

To change month header to 3 letters you need to change renderTpl in Ext.picker.Date.

Do something like that:

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

Changed the getDayInitial function to render 3 letters.

Upvotes: 2

Related Questions