elmasse-bundle: A Sencha Cmd Package

Internationalization for ExtJS.

Feb 17, 2015 · 2 min read

The Ext.i18n.Bundle project is now available as a Sencha Cmd Package. The latest working version for ExtJS 5.1 is published in my public package repository.

The package is named elmasse-bundle.

What Do You Need?

You need to have Sencha Cmd installed:

Sencha Cmd: Install the latest version from here.

Register a New Repository

First, we need to register the repository so Sencha Cmd can look up for new packages:

$ sencha repo add elmasse http://elmasse.github.io/cmd/pkgs


Create a New ExtJS 5 Application

Let's create a new application so we can see how to use it:

$ sencha generate app -ext MyApp ./MyApp

Edit App.Json

Now we need to edit the app.json file (located under MyApp folder) and add the package as a dependency:



    "requires": [ "elmasse-bundle" ],


Declare the Bundle on the Application

Edit the app/Application.js file to add the require (#1) and define the bundle configuration (#2):


Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',
    // #1
    requires: ['Ext.i18n.Bundle'],

    // #2
    bundle: {
        bundle: 'Application',
        lang: 'en-US',
        path: 'resources/bundles',
        noCache: true

    launch: function () {
        // ....


Add the Bundle Files

We defined our bundle as Application and the path where they will be published in our web server (resources/bundles). This means we need to create our Application_en-US.properties file under the resources/bundle folder:


message: This is a simple message
west.html: <div>This is a text that will be used as an <b>html tag</b></div>

Use the Bundle

Almost there. We have all configured now, so we can start using our bundle. We can grab the bundle instance and ask for the desired message by a key:


    launch: function () {

This will print in the console the value of the message defined in our Application_en-US.properties file, when the application launch.

But we can also use the lazy definition in our views. Modify the app/view/main/Main.js around line 32:

    // ...
    items: [{
        xtype: 'panel',
        // ...
        region: 'west',
        html: { type: 'bundle', key: 'panel.west.message' }, // <-- replace html with this
        // ...
    // ...

We can start the web server and watch for changes now:

$ sencha app watch

Open http://localhost:1841 on your browser and you will see that your west panel now shows the message defined in our Application bundle.


  • Read bundles in .properties or .json file formats.
  • Use linked values for message keys.
  • Lazy bundle objects


The code is not yet available on the Ext.i18n.Bundle github repo but it will be there soon. You can post any issues here.

Any viewpoints and opinions expressed in this article are my own and do not, in any way, reflect those of my employer, my colleagues, or anyone else. I speak only for myself, not for them.