1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    snam is on a distinguished road

      0  

    Default Unanswered: Localization

    Unanswered: Localization


    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

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    33
    Answers
    4
    Vote Rating
    0
    jag2000 is on a distinguished road

      0  

    Default Perhaps try this way

    Perhaps try this way


    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?

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    28
    Answers
    2
    Vote Rating
    0
    snam is on a distinguished road

      0  

    Default


    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 ?

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    33
    Answers
    4
    Vote Rating
    0
    jag2000 is on a distinguished road

      0  

    Default Maybe the docs could help

    Maybe the docs could help


    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.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    1
    Vote Rating
    0
    ygillet is on a distinguished road

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Answers
    4
    Vote Rating
    5
    szimek is on a distinguished road

      1  

    Default


    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...

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Location
    Valence
    Posts
    7
    Vote Rating
    0
    mohierf is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User
    Join Date
    Nov 2012
    Location
    Netherlands
    Posts
    50
    Answers
    6
    Vote Rating
    1
    eastlander is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Answers
    4
    Vote Rating
    5
    szimek is on a distinguished road

      0  

    Default


    @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)