Results 1 to 2 of 2

Thread: i18l for buttons and labels, etc

  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Vote Rating

    Default i18l for buttons and labels, etc

    I understand the following statement from the documentation on Localizing your own app

    "Ext JS doesn't enforce any particular approach to localization. It's only the framework itself that uses the approach outlined here. Feel free to localize your app in whichever way feels best for you"

    So, for example, lets say I have four buttons and in my SA, I have set the text for each as, "acknowledge", "bar", "clear", "refresh" for example.

    When I deploy my application I see the specified text in the buttons. Now say I want to display the button text in German, French or Chinese.

    At this point I at a complete loss as to how to do this since SA does not seem to have a config option or something that allows me to specify my own locale translations for text in buttons, labels, models, etc.

    How might I go about doing this, is there a standard way to do this, any documentation or tutorials on this.

  2. #2
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Stockholm, Sweden
    Vote Rating


    I'll try to point you in the direction I took when localizing my project (that I am now porting to Ext JS 4.1 in SA). It's not a turn-key solution for your project.

    The trick is to start localization from the very beginning. I put all my strings in a js-file (en.js) that lives in the same namespace as the application (app namespace UP8). The en.js file contains:

    UP8.lang = {    
        param: function(s, r) {
            return Ext.String.format(s, r);
        param2: function(s, r1, r2) {
            return Ext.String.format(s, r1, r2);        
        param3: function(s, r1, r2, r3) {
            return Ext.String.format(s, r1, r2, r3);        
        CertificateID: 'Certificate ID:',
        CertValidated: 'Validated on:',
        CertIssued: 'Certificate Issued:',
        TitleCertValFailed: 'Validation Failed',
        MsgCertValFailed: 'The Certificate ID could not be found in the database',
        Firstname: 'Firstname',
        Lastname: 'Lastname',
        Company: 'Company',
        City: 'City',
        Email: 'Email',
        Address1: 'Address (line 1)',
        Address2: 'Address (line 2)',
        PostalCode: 'Postal code',
    This file is included in the app.html file using PHP to detect a URL parameter lang=en and then include the correct javascript language file.

    In SA I use the afterrender event in things to localize:
    function onButtonAfterRender(abstractcomponent, options) {
    Some components are harder than other to localize, for example column headers that took me some time to figure out:
    The project currently being ported is (written spaghetti-style in Ext JS 3.3.1). The rewritten version is fully MVC in Ext JS 4.1.1 and created in SA.

    If you have additional specific questions, I'll try answer them.

    Good luck,

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts