Implementing a publish/subscribe mechanism with relayEvents()

In this recipe, you'll learn how to implement a publish/subscribe mechanism, where a component listens to events generated from within other components. A very simple console listens to events that occur inside two panels, as seen in the following screenshot:

How to do it...

1. 1. Create a namespace for your code and define a utility function that will be used by your event-handling routines:

   Ext.ns('Dashboard');
   function WriteToConsole(console, msg) {
   var prevValue = console.getValue();
   if (null == prevValue) prevValue = '';
   console.setValue(prevValue + msg);
   }
   

2. 2. Create a Portlet class as an extension of Ext.Panel:

   Dashboard.Portlet = Ext.extend(Ext.Panel, {
   anchor: '100%',
   frame: true,
   collapsible: true,
   draggable: true,
   

3. 3. Add some tools to the Portlet class and attach the click handlers to each tool. The click handlers will fire the custom events defined in the next step:

   tools: [{
   id: 'gear',
   handler: function(e, toolEl, panel...