elmasse-bundle: A Sencha Cmd Package


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.


Max Fierro © 2013-2019

Built with ♥︎ and nextein by /elmasse