Skip to content

January 7, 2012

Simple GUI messages handling with ExtJS 3

by Joe Kuan

I need to have a very simple object to handle all the GUI messages in one single file which is for the purposes of simple extension on internationalisation. Also I can just hand the messages file to someone easily to correct my crappy english and plug back in the application. The code also handles message formatting using Ext.Template class.

Here is the code

Ext.ns("MyApp.messages");

MyApp.messages = function() {

  // List of messages don't require formatting
  var messages = new Ext.util.MixedCollection();

  // List of messages require formatting
  var tmpl_msg = new Ext.util.MixedCollection();

  return {

    // Add a list of messages
    addMessages: function(message_list) {
      for (var i = 0; i < message_list.length; i++) {
        var item = message_list[i];
        if (item.template) {
          tmpl_msg.add(item.key, item.message);
        } else {
          messages.add(item.key, item.message);
        }
      }
    },

    // Get the message with key. Format it if necessary with args
    getMessage: function(key, args) {
      var message = null;
      var format = false;
      if (args) {
        format = true;
        message = tmpl_msg.get(key);
        if (!message) {
          message = messages.get(key);
          format = false;
        }
      } else {
        message = messages.get(key);
      }

      if (format) {
        var template = new Ext.Template(message);
        return template.apply(args);
      }

      // Return the key with - undefined warning
      if (!message) {
        message = "Undefined message type. Key: '" + key + "'";
      }

      return message;
    }
  }
}();

Each message object contains three fields, template, key and message:

  • template (boolean) is to indicate whether the message requires template formatting.
  • key (string) is to index the message
  • message (string) is the body of the message. The message body can contain ExtJS template syntax and simple HTML tags if necessary.

So you can construct a set of Javascript files with messages in different languages. Then in the final HTML file, you can load different script file according to the user’s language choice. For example, messages_en.js

MyApp.messages.addMessages([
  { template: false, key: 'ERR_MSG_1', message: 'Error message' },
  { template: true, key: 'ERR_MSG_2', message: 'Error: invalid input in <b>{fieldname}</b>.' }
]);

To display a message in my app:

Ext.Msg.alert('Error',
    MyApp.messages.getMessage('ERR_MSG_1'));

To display a message requires formatting:

Ext.Msg.alert('Error',
    MyApp.messages.getMessage('ERR_MSG_2', { fieldname: field }));
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: