PDA

View Full Version : Fire Events & Controllers



dwb
21 Feb 2012, 9:40 AM
Hi All,

I'm having problems with controllers and fire events. I have a panel with a toolbar that's buried inside other panels. This panel has a button that, when clicked, launches a Fire Event.

Here's the panel's toolbar/button code:
items: ['->',{
xtype: 'button',
id: 'addEventBtn',
height: 20,
iconCls: 'iconEventRuleSet',
text: 'Add Event Rule',
tooltip: 'Adds a new Event Rule.',
handler: function(){
this.fireEvent('bpAddEventRule');
}
},{...more stuff..}

Next, I have a controller. In the controller, I've registered the 'bpAddEventRule' fire event. Also, I have a listener to listen for the 'bpAddEventRule' fire event and I've installed a simple handler to do stuff when the event occurs. The problem is that the controller never gets the fire event.

The only way I've gotten it to behave as I wish is to use the ref:/selector: method and then drill all the way down to the button in the panel's toolbar. This is not what I'm looking for. I want to be able to listen for a fire event only, regardless of what Ext Object is sending it. The idea that the event sender must be identified to be able to react to the event is preposterous! I would like for the controller to simply listen for a fire event - who cares who sent it:s.

Here's the code I've got so far for the controller.

Ext.define('Nile.controller.BillingPlans-controller', {
extend: 'Ext.app.Controller',
alias: 'widget.BillingPlans-controller',

views: ['layout.BillingPlanRule'],

refs: [
//alias: 'widget.billplanrule', 'made-up name to represent panel'
{selector: 'billplanrule', ref: 'BillingPlanRule'},
],

init: function() {
console.log('BillingPlans-controller loaded...');
this.application.fireEvent('bpAddEventRule');
this.application.addListener({
'bpAddEventRule' : this.onBPaddEventRuleEvent,
});

this.control({
'billplanrule': {
afterrender: this.myTemp,
},

/*drilldown to 'Add Rule Event' button - this isn't good*/
'billplanrule toolbar[dock=top] button[id=addEventBtn]': {
bpAddEventRule: this.onBPaddEventRuleEvent,
}
});
},

//functions
myTemp:function(){
console.log('Billing Plan Rule panel rendered...');
},

onBPaddEventRuleEvent: function(){
console.log('so you want ta add a new Event Rule... right?');
}
});

Anyway, I'm disappointed I couldn't figure this one out myself; even more disappointed that I can't find samples because this (in my opinion) is core to EXT functionality - why is it so hard to get EXT answers for things I see as extremely common; I'm quite put-out and really tired of searching... :(( Not to mention holding up production.

mitchellsimoens
21 Feb 2012, 11:42 AM
You don't need to use fireEvent, just remove the handler and listen for the click event on the button. That being said that isn't your problem. I would assume that your ComponentQuery selector isn't resolving your button billplanrule toolbar[dock=top] button[id=addEventBtn]

dwb
21 Feb 2012, 12:49 PM
Hi Mitchell
Thanks for quick reply! I wasn't as clear as I should have been on this...

The toolbar button's click is resolved when I drilldown to it using:
'billplanrule toolbar[dock=top] button[id=addEventBtn]

This is great in most situations. But, what I'm really after is the ability to fire any "custom" event and simply have a controller listen for the event - regardless of knowing the panel/Ext Thingy that originated the event.

mitchellsimoens
21 Feb 2012, 12:52 PM
I have no clue what that says.

vietits
21 Feb 2012, 6:03 PM
@dwb

Do you mean you want to catch the bpAddEventRule event at the billplanrule panel level like this one?


init: function() {
this.control({
'billplanrule': {
afterrender: this.myTemp,
},
/*drilldown to 'Add Rule Event' button - this isn't good*/
// 'billplanrule toolbar[dock=top] button[id=addEventBtn]': {
'billplanrule': {
bpAddEventRule: this.onBPaddEventRuleEvent,
}
});
},

If this is what you want, you can't do with original implementation of Ext (at least up to 4.1.0-b2). There are many posts on this forum talked about this issue (e.g Catching bubbled events in controllers (http://www.sencha.com/forum/showthread.php?174921-Catching-bubbled-events-in-controllers), Controller and Custom event firing (http://www.sencha.com/forum/showthread.php?179350-Controller-and-Custom-event-firing), MVC event bubbling - bug ot is it just me ? (http://www.sencha.com/forum/showthread.php?152069-MVC-event-bubbling-bug-ot-is-it-just-me&highlight=bubble), etc). That's because the controller does not catch bubbled events fired by its children/descendant.

I have a solution "Capture bubbled events in controller (http://www.sencha.com/forum/showthread.php?176993-Capture-bubbled-events-in-controller)" that can solve this problem. Let have a look and try.

dwb
22 Feb 2012, 8:34 AM
Hi Vetits - Thanks for this helpful reply. Seems I was look for behavior that doesn't exist. The code your've shared here is GREAT, I'm now implementing it with promising results. Thanks for assist here.