HowTo

Ext.i18n.Bundle HowTo & Examples

Using Ext.i18n.Bundle in your ExtJS4 application

Using Bundle extension in your EXTJS4 application is fairly simple. You just need to declare the Bundle object in your application

Ext.application({
    requires: ['Ext.i18n.Bundle'],
    name: 'MyApp',
    
    // ....
});

Create the Bundle instance

Ext.application({
    requires: ['Ext.i18n.Bundle'],
    name: 'MyApp',
    
    bundle: {
        bundle: 'Application',
        path: 'resources',
        lang: 'en-US'
    },
    // ....
});

What we are doing here is declaring the Bundle instance by naming some parameters. First, bundle as parameter, is the name of the bundle file you are trying to use, in this case 'Application' means you want to use Application.properties file. In second place, we have path, this is the path where our file is placed and exposed in our web server. What that means? In my case, I have my file under http://localhost:4348/resources/Application.properties so my path is "resources".

Using Bundle

Now we have declared our bundle we can use it by accessing the bundle thru the application instance:

Ext.application({
    requires: ['Ext.i18n.Bundle'],
    name: 'MyApp',
    
    bundle: {
        bundle: 'Application',
        path: 'resources',
        lang: 'en-US'
    },

    launch: function(){
        // since we are into launch method inside the Ext.application we can use `this` to access bundle
        console.log(this.bundle.getMsg('_MESSAGE_'));
        // - or -
        console.log(MyApp.getApplication().bundle.getMsg('another.message'));
    }
});

Properties File

This is an example of a Properties File that can be used with the example presented before.

##
# This is a Comment
##

! This is also a comment

_MESSAGE_ My message goes here

#Using : as separator
another.message:This is another message and you can inculde # and ! inside a message.

#Using = as separator
yet.another.message=This is a long message, you can use backslah to \
keep writting in here and this line will be part of the yet.another.message key \
same as this one!

Using Bundle in MVC apps

As we saw configuring the bundle is fair easy. Once the application is launched we have the bundle accessible from the application instance. We can now use it from Views or even Controllers:

Define the application file:app.js

Ext.application({
    requires: ['Ext.i18n.Bundle'],
    name: 'MyApp',
    
    bundle: {
        bundle: 'Application',
        path: 'resources',
        lang: 'en-US'
    },

    views: ['Main'],

    launch: function(){
        Ext.create('MyApp.view.Main', {
            renderTo: Ext.getBody()
        });
    }
});

Now we need to define the Main view which will be instantiated once the application is launched.

file: view/Main.js

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Panel',
    
    requires: ['Ext.toolbar.Toolbar'],   
 
    tbar: Ext.create('Ext.toolbar.Toolbar',{
       items: [{text: 'text'}]
    }),

    initComponent: function(){
        var me = this;
        me.items = [
            {
                height: 300,
                html: MyApp.getApplication().bundle.getMsg('panel.html')
            }
        ];

        me.callParent(arguments);
    }
});

It is good to declare the component inside the initComponent method in this case since we need to make sure that App.getApplication().bundle.getMsg is called once the application has been launched. This is a common issue that you might face if you place the bundle call outside the initComponent, it might work on development since the file is loaded right after the bundle is initialised, but if you minimize the application using Sencha Cmd or JSBuilder your call to getMsg will be made when the script is loaded and at that time the Ext.application might has not be called.