Ext.ux.MsgBus Plugin

Code in this post can be obsolete, however, principles and theory may still apply.
Recently I’ve been looking for a better way of inter-component communication in Ext so I’ve read a couple of posts with Message Bus implementations, I’ve skimmed over OpenAjax Hub page but I haven’t found anything suitable for my needs.

The first approach was Simple Message Bus Example but that is more concept proof than a really usable way in production environment.

I like the concept of message subjects (topics) as dot separated sequence of tokens with the ability to subscribe to messages with specific subjects and with wildcard support.

For example, if a component would subscribe to the subject eu.extjs.desktop.** it would receive message with subject eu.extjs.desktop.wallpaper.set but it wouldn’t receive message eu.extjs.taskbar.hide.

So this plugin was born.

Ext.ux.MsgBus fits in any component that is descendant of Ext.util.Observable and it does not need any other changes/overrides. You would stick it only into the components that must participate in bus messaging. It adds subscribe and publish methods to the component.

Usage example:

The above would call p.onWallpaper callback once upon the receipt of a “wallpaper” message.

Other example:

I haven’t tested it fully yet so take it more as an initial idea than as a bullet-proof, worldwide-tested code. Also, I didn’t try in any means to implement OpenAjax standards and use this plugin for an inter library communication. Consider it as a one possibility of intra-Ext, inter-component communication.

Any comments and/or bug reports are welcome.


The accompanying example: Ext.ux.MsgBus

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


  1. joe says

    re: Konstantin

    I think that is a limitation of Ext, since direct Observable descendents to not take the “plugin” property. tried it on a RowSelectionModel instance and it failed as well.

  2. joe says

    Very useful stuff indeed. My approach of what I started today before i found your blog post was an event broker component that would pool all events that are relayed to it. Although I do prefer your solution of a message bus.

    However, my approach was hooking the necessary code right into Ext.util.Observable, so that all objects that are descendants of Observable could communicate (right now anything thats not of the Component class won’t accept plugins). However, I failed to override Ext.util.Observable properly, my skillz are not at leet 😉

    I’d love to any pointers by anyone on how to override Ext.util.Observable properly, since it seems to be quite different to overriding Component, to fit the code into the override and have the messagebus be accessible by any descendant of Observable.

  3. Red says

    I am little confused about how the actual filtering is performed. Because the subscription is always done for ‘message’ and the publish always fires the ‘message’ event. Is the filtering used in the publish method?

    I am trying to get this to work on ExtJs4..it works allright..but Its basically working by creating a listener for message and firing an event on it. No subject filtering as expected. What am I doing wrong?

  4. Vijay says

    Can you write the example by using msgbus plugin in Object Oriented manner ?

    Why because if components are there in a single page it is nicely working.. But i want in object oriented manner i dont’t know how to do it in OOP style ?

  5. Rahul Umrao says

    If multiple component are in the same page then it is working fine ..but if in the object oriented manner how can i use publish/subscribe methods and most importantly where i use these methods in the component –
    for Ex- component 1(Ext.panel) having button and on button click i want to open a component 2 (Ext.panel) then how & where i need to put publish and subscribe by using message bus plugins …… please give me suggestion because of this i am not able to use correctly the message bus functionality .

  6. Lev Dashevskiy says

    Hello, Saki!
    First of all, thanks so much for all of your superb work – you seem to be everywhere (ExtJs is) ! :)
    Secondly, I wanted to ask you a question about the MsgBus. It probably is a broader question about the JavaScript scope and area of visibility.
    If I have 2 segments of JavaScript code within my HTML page code (that is 2 … chunks, separated by other HTML), each of the chunks rendering some UI, is it possible to use a MsgBus instance to communicate between the 2 interfaces?

  7. Oğuz Çelikdemir says

    Saki, it would be nice to see a syntax highlighter in your blog to be able to read easily code!

We will be happy to hear back from you

Please Login to post a comment