Localization

**snam** · 25 Apr 2012 11:22 AM

Hi!

I have been looking for a while now, and cannot find good information about how to localize the standard components.
I have been trying these kind of approaches:

Code:

        Ext.apply(Ext.MessageBox, {
            OK    : {text: 'OK',     itemId: 'ok',  ui: 'action'},
            YES   : {text: 'Oui',    itemId: 'yes', ui: 'action'},
            NO    : {text: 'Non',     itemId: 'no'},
            CANCEL: {text: 'Annuler', itemId: 'cancel'},


            INFO    : Ext.baseCSSPrefix + 'msgbox-info',
            WARNING : Ext.baseCSSPrefix + 'msgbox-warning',
            QUESTION: Ext.baseCSSPrefix + 'msgbox-question',
            ERROR   : Ext.baseCSSPrefix + 'msgbox-error',


            OKCANCEL: [
                {text: 'Annuler', itemId: 'cancel'},
                {text: 'OK',     itemId: 'ok',  ui : 'action'}
            ],
            YESNOCANCEL: [
                {text: 'Annuler', itemId: 'cancel'},
                {text: 'Non',     itemId: 'no'},
                {text: 'Oui',    itemId: 'yes', ui: 'action'}
            ],
            YESNO: [
                {text: 'Non',  itemId: 'no'},
                {text: 'Oui', itemId: 'yes', ui: 'action'}
            ]
        });

I call this code from my Application 'launch' method.
Is it the correct way of doing this?
If so, is it the right place to do so?

1) This methods works for my message boxes except the one that pops up from the 'onUpdated' method in my application. Is it a matter of timing of the Ext.apply ?

2) I cannot apply this method for the Ext.picker.Picker doneButton and cancelButton:

Code:

        Ext.apply(Ext.picker.Picker, {
          doneButton: 'Ok',
          cancelButton: 'Annuler'
        });

This doesn't work...

Is there any good resource about how to do proper localization ?

Thanks

**jag2000** · 25 Apr 2012 11:34 AM

In my projext i have a huge language.js and in it are a long list with constants like this

Code:

var STR_MESSAGE_ALERT_TITLE = 'Attention';
var STR_MESSAGE_NOT_ALLOWED_TEXT = 'Your action is not allowed';
...

On ery point in my app i use such constants and so i could simply replace ma language file. But i have to say that i do not override existing components, but every component could configured and so it is easy to localize it like this

Code:

Ext.Msg.alert(STR_MESSAGE_ALERT_TITLE, STR_MESSAGE_NOT_ALLOWED_TEXT);

You can do this mechanism also mith panel-titltes or buttons and so on.

By the way, I also use a app_config.js, where i have constants for ID's, class names, store based attributes and so on, so i am very very flexible. Look at an example

Code:

var CLASSPATH_BASE = 'MyApp';
var STORE_PRODUCT = 'ProductStore';
var STORE_PRODUCT_CLASSPATH = CLASSPATH_BASE + '.store.' + STORE_PRODUCT;
...


Ext.define(STORE_PRODUCT_CLASSPATH, {
    extend: 'Ext.data.Store',
    requires: [MODEL_PRODUCT_CLASSPATH ],
    ...
})

So you see, it is very easy to be flexible. Ok, you have to type a bit more, but a good thing is, you have a little spellcheck. If you wrote class names by the hand every time and only one character is wrong, you get strange JS-Warnings/Error. If you use constants, you get a hint, that the constant XYZ is not defined and so it could only a error in your const definitions or in the class definition (first line). Is it nice?

**snam** · 25 Apr 2012 11:47 AM

Thanks for your answer.

I understand what you are doing, but I don't see how this would help me.

Let's say I want to translate the 'yes' and 'no' buttons of a Ext.Msg.confirm box. I don't see how your ideas could apply there ?

**jag2000** · 26 Apr 2012 12:40 AM

I do not know how at this moment, but the Ext.MessageBox has a config for buttons and also setButton methods. Perhaps you could define your own buttons with localized labels. Sometimes i look at the original source to find out, how someting is happen and how i could "patch" this behavior.

**ygillet** · 11 Jun 2012 5:24 AM

Can someone from sencha team give a hint, we definitely need to localize our app too and cant find any pointer to any official doc on how to achieve that.
Thanks

**szimek** · 28 Nov 2012 5:11 AM

I'm currently doing something very similar to what was described in this post: http://www.sencha.com/forum/showthre...l=1#post847467

As I'm not using sencha-touch-all.js file, I had problems with loading translation file as described in this post - if I loaded it before app.js file, then some components wouldn't be required yet and thus wouldn't get overridden, if I loaded it after app.js then it would render the first view using English strings and then override them, so that all other views would be correctly rendered.

So I simply put all this stuff into a singleton class with "load" method, require it in my app and call it at the very beginning of the "launch" method.

/locale/de.js

Code:

Ext.define("Ext.locale.de", {
    singleton: true,

    load: function () {
        Ext.Date.dayNames = [
            'Sonntag',
            'Montag',
            'Dienstag',
            'Mittwoch',
            'Donnerstag',
            'Freitag',
            'Samstag'
        ];

        Ext.Date.monthNames = [
            'Januar',
            'Februar',
            'März',
            'April',
            'Mai',
            'Juni',
            'Juli',
            'August',
            'September',
            'Oktober',
            'November',
            'Dezember'
        ];

        Ext.Date.monthNumbers = {
            'Jan': 0,
            'Feb': 1,
            'Mär': 2,
            'Apr': 3,
            'Mai': 4,
            'Jun': 5,
            'Jul': 6,
            'Aug': 7,
            'Sep': 8,
            'Okt': 9,
            'Nov': 10,
            'Dez': 11
        };

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

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

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

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

        if (Ext.util.Format) {
            Ext.util.Format.defaultDateFormat = 'd/m/Y';
        }

        if (Ext.picker) {
            if (Ext.picker.Picker){
                Ext.define('Ext.picker.Picker', {
                    override: 'Ext.picker.Picker',
                    config: {
                        doneText: 'Gemacht'
                    }
                });
            }

            if (Ext.picker.Date) {
                Ext.define("Ext.picker.Date", {
                    override: 'Ext.picker.Date',
                    config: {
                        'dayText': 'Day',
                        'monthText': 'Month',
                        'yearText': 'Year',
                        'slotOrder': ['day', 'month', 'year']
                    }
                });
            }
        }

        if (Ext.IndexBar) {
            Ext.define('Ext.IndexBar', {
                override: 'Ext.IndexBar',
                config: {
                    'letters': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
                }
            });
        }

        if (Ext.LoadMask) {
            Ext.define('Ext.LoadMask', {
                override: 'Ext.LoadMask',
                config: {
                    'message': 'Lade...'
                }
            });
        }

        if (Ext.DataView) {
            Ext.define('Ext.DataView', {
                override: 'Ext.DataView',
                config: {
                    'loadingText': 'Lade...'
                }
            });
        }

        if (Ext.NestedList) {
            Ext.define('Ext.NestedList', {
                override: 'Ext.NestedList',
                config: {
                    'backText': 'Zurück',
                    'loadingText': 'Lade...',
                    'emptyText': 'No items available.'
                }
            });
        }

        if (Ext.MessageBox) {
            Ext.MessageBox.OK.text = 'OK';
            Ext.MessageBox.CANCEL.text = 'Abbrechen';
            Ext.MessageBox.YES.text = 'Ja';
            Ext.MessageBox.NO.text = 'Nein';
            Ext.MessageBox.OKCANCEL[0].text = 'Abbrechen';    // Cancel
            Ext.MessageBox.OKCANCEL[1].text = 'OK';           // OK
            Ext.MessageBox.YESNOCANCEL[0].text = 'Abbrechen'; // Cancel
            Ext.MessageBox.YESNOCANCEL[1].text = 'Nein';      // No
            Ext.MessageBox.YESNOCANCEL[2].text = 'Ja';        // Yes
            Ext.MessageBox.YESNO[0].text = 'Nein';            // No
            Ext.MessageBox.YESNO[1].text = 'Ja';              // Yes
        }
    }
});

app.js

Code:

Ext.application({
  requires: [
        "Ext.DateExtras",
        "Ext.MessageBox",

        "Ext.locale.de"
  ],
  
  launch: function() {
    Ext.locale.de.load();
    Ext.Viewport.add(...)
  }
});

The file with built-in translations is most likely not complete and some stuff there may be unnecessary, but unfortunately Sencha doesn't provide one with complete translations - touch/src/locales/ext-lang-en.js is not complete as well...

**mohierf** · 30 Nov 2012 2:55 AM

Hi szimek,
many thanks for the example source code ... it really helped me to localize my app to French ! There is a syntax error in line 74 in your code :

Code:

Ext.defined("Ext.picker.Date", {

should be

Code:

Ext.define("Ext.picker.Date", {

Best regards, Fred

**eastlander** · 30 Nov 2012 4:12 AM

I did this on my datepicker:

Code:

{
                                            readOnly: true,
                                            labelWidth: '30%',
                                            label: 'Datum',
                                            name: 'OrderDate',
                                            itemId: 'OrderDate',
                                            inputCls: 'x-html-form-text-left',
                                            xtype: 'datepickerfield',
                                            picker:
                                            {
                                                dayText: 'Dag',
                                                monthText: 'Maand',
                                                slotOrder: [
                                                    'day',
                                                    'month',
                                                    'year'
                                                ],
                                                yearText: 'Jaar',
                                                doneButton: 'Gereed',
                                                cancelButton: 'Annuleer'
                                            }
                                        }

Hope that helps.

**szimek** · 30 Nov 2012 5:17 AM

@mohierf Thanks for finding the typo!

For those who have problems loading such file, here's how I did it (though I have no idea if it's the right way):
- add workspace.classpath=${workspace.dir}/locale to .sencha/workspace/sencha.cfg file to make the build pass (otherwise it wouldn't find locale/de.js file)- add Ext.Loader.setPath('Ext.locale', 'locale'); at the very top of app.js file to make it work after build passed (otherwise it assumed that the file is in touch/src folder, probably because of Ext namespace)

Localization

Thread Tools

Search Thread

Display

Unanswered: Localization

Unanswered: Localization

Perhaps try this way

Perhaps try this way

Maybe the docs could help

Maybe the docs could help