Event propogation

[re_buchanan]

Background: I have an application with a Viewport that contains 3 Panels. One of those Panels is a 'navigation' panel that contains NavigationImageButtons (my own extension of Ext.Button). I've added an event to NavigationImage Button called 'navigationPress' that is fired when the 'onClick' event occurs. The navigation panel has a listener for this event and this listener fires a 'navigationRequest' event (defined for that panel). The viewport has listener for the 'navigationRequest' event, but it never gets fired and I'm stumped.

Here it is schematically:

NavigationImageButton: onClick event received, causes navigationPress event to be fired (this works)

NavigationPanel: navigationPress event received, causes navigationRequest event to be fired (this works)

Viewport: navigationRequest event received, causes "some action" (does not work, event never received)

here's my code:

NavigationImageButton

com.my_company.myApplication.NavigationImageButton = Ext.extend(Ext.Button,{
    border: false,
    initComponent:function() {
        Ext.apply(this, {
            cls:'myApplicationNavImgBtn-text-icon',
            text:''
            }
        );
        this.addEvents('navigationPress');
        com.my_company.myApplication.NavigationImageButton.superclass.initComponent.apply(this, arguments);
    },
    
    onClick: function(){
        this.fireEvent('navigationPress', this); // this works
    }
});

Ext.reg('myApplicationNavigationImageButton',com.my_company.myApplication.NavigationImageButton);

NavigationPanel

com.my_company.myApplication.NavigationPanel = Ext.extend(Ext.Panel, {
    border : false,
    initComponent : function() {
        Ext.apply(this, {
                    autoScroll : true,
                    split : true,
                    collapsible : true,
                    collapseMode : 'mini',
                    bodyStyle : 'padding:2px;',
                    width : 330,
                    minSize : 330,
                    items : [{
                        layout : 'table',
                        layoutConfig : {
                            columns : 2
                        },
                        items : [{
                            xtype : 'myApplicationNavigationImageButton',
                            icon : '../../images/menu_icons_01.jpg',
                            tooltip : 'View Benefits',
                            destination: 'ViewBenefits',
                            listeners: {navigationPress: function(){
                                this.fireEvent('navigationRequest', this); //this works
                            }}
                        }, {
                            // more buttons follow    
                        }]
                    }]
                });

        this.addEvents('navigationRequest');

        com.my_company.myApplication.NavigationPanel.superclass.initComponent.apply(
                this, arguments);
    }
});

Ext.reg('myApplicationNavigationPanel', com.my_company.myApplication.NavigationPanel);

Viewport

com.my_company.myApplication.MyApplicationViewport = Ext.extend(Ext.Viewport, {
    border : false,
    initComponent : function() {
        Ext.apply(this, {
                        layout: 'border',
                        renderTo: Ext.getBody(),
                        items: [{region: 'north',
                                 id:'myApplicationHeaderPanel',
                                 xtype: 'myApplicationHeader'
                                },
                                {region: 'west',
                                 id:'myApplicationNavigationPanel',
                                 xtype: 'myApplicationNavigationPanel'
                                },
                                {region: 'center',
                                 id:'myApplicationContentPanel',
                                 xtype: 'myApplicationDefaultContentPanel'}
                               ]
                });
        com.my_company.myApplication.MyApplicationViewport.superclass.initComponent.apply(this, arguments);
    },
    
    navigationRequest: function(){
        Ext.Msg.alert('To Be Completed','Going Somewhere?'); // this does NOT work
    }
});

Ext.reg('myApplicationViewport', com.my_company.myApplication.MyApplicationViewport);

my Application.js

Ext.onReady(
    function(){
        Ext.QuickTips.init();
        var viewport = com.my_company.myApplication.MyApplicationViewport();
    }
);

The idea (following Saki's tutorial on creating big applications) is to have the viewport accept the 'navigationRequest' and reload the 'center' region with the appropriate stuff.

Of course, I really don't want the NavigationPanel to have to 'forward' the request (i.e., the two seperate events), but to have the viewport pick it up directly via some bus-like mechanism. I also want the listener to have some way of determining what is being requested without know 'who' (i.e., which particular object) requested. However, as I'm still very much in the learning stage I thought this would be a good baby step - naturally, I'm having trouble even getting this to work.

Here's some of the stuff I've already read that touches on events (and as far as I can tell, understood):

http://blog.extjs.eu/know-how/events-explained/
http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0

What am I missing?

[re_buchanan]

I've figured out a way around this using an Ext.util.Observable wrapped in a Singleton. This is pretty much what I was ultimately looking for so it really doesn't matter, but I am still curious as to why the above didn't work.