Simple GUI messages handling with ExtJS 3

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 }));

Advertisement