Enhance ExtJS Ticker with Store support

I need a ExtJS ticker and I found someone posted the code in the sencha forum which has an online demo. However, I need a number of extra features which are not supported. So again I have modified the code. Couple of the features are inspired by Mioplanet’s news ticker. Here are the main features:

• option for ExtJS Store object
• visually enhance with color labels
• ticker pauses when mouse hovers over
• support categorised message type such as: Warning, Info
• click event handler support for messages

Download

You can download the code here.

Example

For usage example, see ticker.html in the github

Implementation

In order to support Store class, when the ticker retrieves messages from the server side, the messages are stored until the current ticking messages are scrolled to the end. Then the new arrived messages are formatted and displayed.

To create a Ticker object with a Store object, simply do:

var ticker = new Ext.ux.Ticker({
  id: 'ticker',
  width: 450,
  autoHeight: true,
  direction: 'left',
  store: new Ext.data.JsonStore({
    url: './ticker.json'
    fields: [ 'id', 'time', 'type', 'message' ],
    autoLoad: false
  })
});

In this implementation, the JsonStore returns each ticker message contains id, time, type and message fields.

The id field is the id of the message which is particular useful if you need to bind further click action to the message. The type field is the message type for grouping the messages into a category. In my example, I use type values as ‘warn’ or ‘info’ and display these categories with specific color tags before the messages. Users can modify these type values for their own applications. The time field is in unit of seconds of unix time.

If you need to modify the Ticker class for different data schema, then overwrite the default setReloadStore and setMessages methods.

The method setReloadStore is to format the Store records into ticker message objects when the store’s load method is called.

// Define your own if on how you want to group message differently
setReloadStore: function() {
  // Format into ticker messages when the records arrived
  this.store.on('load', function(store, records, opts) {
    // List of messages for each category
    var warnMsg = [], infoMsg = [];
    for (var i = 0; i < records.length; i++) {
      var rec = records[i];
      // Format unix time into datetime
      var dt = Date.parseDate(rec.data.time, "U");
      // Grouping 'warning' type messages
      if (rec.data.type == 1) {
        warnMsg.push({ id: rec.data.id, msg: dt.format('G:i:s') + ' ' + rec.data.message + '. ' });
      }
      // Grouping 'info' type messages
      else if (rec.data.type == 2) {
        infoMsg.push({ id: rec.data.id, msg: dt.format('G:i:s') + ' ' + rec.data.message + '. ' });
      }
    }

    this.reloadStore = false;

    // show messages now or wait for messages scroll to the end
    this.updateMessages({ warn: warnMsg, info: infoMsg });
  }, this);
}

The setMessages method is to 1) convert the message objects into HTML elements with appropriate CSS classes defined in ticker.css, 2) if click event handler is defined, bind it to each ticker message.

// If msgs is string, then just update element
// If msgs is an object with warn or info fields, then add some color tags
setMessages: function(msgs) {

...
  // Setup warning messages are defined
  if (msgs.warn && msgs.warn.length) {
    // Create a bold font colored tag leading all the warning messages
    this.els.push(this.contentEl.createChild({ tag: 'font', html:  "Warning", cls: 'x-ticker-warn' }));
    Ext.each(msgs.warn,
      // Put the msgHandlers into scope of click method
      function(item) {
        item.msgHandlers = this.msgHandlers;
        // Create the message element
        var el = this.contentEl.createChild({ tag: 'span', html: item.msg, cls: 'x-ticker-message' });
        // Bind the message click event handler
        el.on('click', function() {
          if (this.msgHandlers && this.msgHandlers.warn) {
            this.msgHandlers.warn(this.id, this.msg);
          }
        }, item);
        this.els.push(el);
      },
    this);
  }
...
}

The bindMsgHandler method allows you to bind specific event handler on clicking certain type of message. The event handler is expected to accept id and message parameters.

var msgHandler = function(id, message) {
  Ext.Msg.alert('Info', "You click ticker msg id: " + id + ", message " + message);
}

ticker.bindMsgHandler('info', msgHandler);
ticker.bindMsgHandler('warn', msgHandler);

Advertisement