Custom Event Help

[Bucs]

Kinda new to custom events and having an issue getting a listener to work. Let's say I have component A which is to be a reusable paging paging toolbar. And component B is a product list that will consume two of these component A's abouve and below the product listing. What are the exact steps that I need to take to get component A to fire the event 'showMoreItems' such that component B can listen to and respond to the event?

I have done the following things. First off, since the reusable comp A extends the panel which is a descendant of Observable, I get events by default so long as I set them up correctly (or so I think). So I have the following code pieces in comp A:


// Component Init
initComponent: function () {
Ext.apply(this, {
items: [
.....
{
xtype: 'button',
.....
handler: this.handleEvents
}
]
});

// Add component Events
compA.superclass.initComponent.call(this);
this.addEvents('showMoreItems');
},

.......

, handleEvents: function(e){
this.fireEvent('showMoreItems', e.type, e);
}



Then in comp B I have the following on the config of comp A:


{
id: 'compA_InstanceName',
xtype: 'compA',
.....
listeners: {
showMoreItems: function (type, e) {
alert('Listen Please!');
}
}
},


I cannot get the listener to work. Debugging shows that compA's handleEvents method is getting called and the fireEvent method as well. So what am I missing here? Do I need to do something else like register the event?

Appreciate ANY help here as I feel that I am close....thanks!

[Bucs]

Dang it...was the ol' ownerCt that was getting me. Wan not firing the event on the proper container.

Just needed:


this.ownerCt.addEvents('showMoreItems');