1. #1
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    7
    DavidThi808 is on a distinguished road

      0  

    Default How do I localize strings?

    How do I localize strings?


    Hi all;

    When designing with Architect, how do I put all strings in a separate resource file that we can change based on the language of the user? Or is another approach recommended?

    thanks - dave

  2. #2
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    561
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    SA does not have any turn-key solution to this. I have done the following:
    1. Put your strings in a separate namespace in a separate JS-file.
    2. Load that file before you include your Ext JS file in the HTML-page
    3. In you SA project, add processconfigs to all things you need to localize and set the text/html/title/fieldLabel properties
    Good luck,
    /Mattias

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    7
    DavidThi808 is on a distinguished road

      0  

    Default


    OW! I was afraid it was something like that.

    thanks - dave

  4. #4
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    561
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    At SenchaCon I discussed this with a couple of people and Sencha engineers and came up with an alternative approach that I can share with you. This may or may not fit your project, especially as it involves overriding components on a high level that may cause performance issues.

    The basic idea is to override Ext.Component along the lines below. The namespace VPCalcDesktop is the app's namespace and VPCalcLang is a file containing the following code and that is required in the SA project:
    Code:
    Ext.define('VPCalcDesktop.Locale',{
       override: 'Ext.Component',
        constructor: function(cfg) {
            if (cfg) {
                this.parser(cfg, 'title');
                this.parser(cfg, 'text');
                this.parser(cfg, 'labelFieldSet');
                this.parser(cfg, 'boxLabel');
                this.parser(cfg, 'fieldLabel');
                this.parser(cfg, 'label');
            }
            
            this.callParent(arguments);
        },
        
        parser: function(config, property) {
            if (config[property]) {
                var text = config[property];
            
            if (text.substr(0, 1) == '#') {
                    var result = VPCalcLang[text.substr(1)];
            }
                    
                config[property] = result||text;
            }
        }
    });
    The file containing the language strings is loaded using a SCRIPT tag on the HTML page and looks like:
    Code:
    var VPCalcLang=VPCalcLang || {}; 
    VPCalcLang=eval('({"indata_tab1":"Projektinformation","indata_tab3":"Installation","indata_tab4":"Driftparametrar"})');
    In SA I add labels etc using the "#" prefix, for example putting #indata_tab1 as the title of a tab. The override on Ext.Component will pick this up and load the localized string from the VPCalcLang namespace.
    (I am developing a Desktop and Touch version of the same application, with different names but the strings are the same hence the different namespace for the strings).

  5. #5
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    561
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    This is how it looks like in SA when I work on the project:

    localized_sa.PNG

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    7
    DavidThi808 is on a distinguished road

      0  

    Default


    I think this would kill us as we have around 4,000 strings.

    I'm hoping they can add something where there is a resource.js that is just a ton of variables that have strings assigned to them. And then also a resource_en.js, resource_de.js, etc. and it loads the appropiate one.

    thanks - dave

Thread Participants: 1