Contents Locales Localization with Sencha Cmd Localization without Sencha Cmd Localizing your Ext JS Extensions

Localization in Ext JS

Communicating with users in a language that they understand and with conventions that they’re used to is vital. Ext JS comes bundled with a localization package that supports over 40 languages ranging from Indonesian to Macedonian, and it’s simple to implement.

Locales

You’ll find all of the bundled locale files in the override folder of the ext-locale package. Locale files are just overrides that tell Ext JS to replace the default English values of certain components. These are generally things like date formats, month and day names, etc.

The date picker is a perfect example. Here’s an excerpt from the Spanish localization file: 

Ext.define("Ext.locale.es.picker.Date", {
    override: "Ext.picker.Date",
    todayText: "Hoy",
    minText: "Esta fecha es anterior a la fecha mínima",
    maxText: "Esta fecha es posterior a la fecha máxima",
    disabledDaysText: "",
    disabledDatesText: "",
    nextText: 'Mes Siguiente (Control+Right)',
    prevText: 'Mes Anterior (Control+Left)',
    monthYearText: 'Seleccione un mes (Control+Up/Down para desplazar el año)',
    todayTip: "{0} (Barra espaciadora)",
    format: "d/m/Y",
    startDay: 1
});

Localization with Sencha Cmd

To implement localization, simply modify the app.json file in your Sencha Cmd generated application. You’ll want to add the “ext-locale” package to the requires block. The resulting addition should look like this: 

/**
 * The list of required packages (with optional versions; default is "latest").
 *
 * For example,
 *
 *      "requires": [
 *          "sencha-charts"
 *      ]
 */
"requires": [
    "ext-locale"
],

Your application is now ready for localization. The next step is to determine the language that you are interested in including. All you need to do is create a locale setting. Simply add the following line to your app.json file: 

"locale": "es",

Note: The locale setting is not a default entry. You will need to add this to your app.json file manually.

Now that your app.json is updated, you can run sencha app build and Sencha Cmd will process the changes. Upon refreshing, you should see that any component with English values now contains Spanish values.

Localization without Sencha Cmd

The simplest way to localize Ext JS without Sencha Cmd is to include the locale file in your index file. 

<!DOCTYPE html>
<html>
<head>
    <!-- Ensure we're using UTF-8 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Localization example</title>
    <!-- Main Ext JS files -->
    <link rel="stylesheet" type="text/css" href="resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="ext-all.js"></script>      

    <!-- Include the translations -->
    <script type="text/javascript" src="ext-locale-es.js"></script>

    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
                renderTo: Ext.getBody()
            });
        });
    </script>
</head>
<body>

Localizing your Ext JS Extensions

You’ll want to ensure that you follow Ext JS best practices for localization when you write a custom component or plug-in. At the very minimum, every text string that’s shown to users should be defined as a property: 

Ext.define("Ext.ux.Weather", {
    sunText: "It's a nice sunny day",
    rainText: "Bad weather, don't go out",
    // ...other code...
});

You’ll want to pay extra care when working with dates. Every language tends to have it’s own way of writing them. When your extension renders a date, provide a config option to specify the format. This way users of your extension can easily override the locale-specific parts.

You can avoid the need for most localization by using components with messages already translated in Ext JS itself (e.g. use Ext.MessageBox.buttonText.ok when rendering “OK” button).

Last updated