PDA

View Full Version : Proper way to bubble events from a preconfigured component



bmcelhany
21 Jul 2010, 9:11 AM
Hello all,

I'm in the middle of my first ExtJS project and am running into an issue regarding event bubbling. This is a pretty simple app structure: in my index.html file is the code to set up a standard border layout. In the center region of the border layout is my pre-configured (extended?) grid panel (the code for this panel is in a separate CcmcGrid.js file). The custom grid has a toolbar with a button and also has a CheckboxSelectionModel set up. So far so good.

What I'd like to happen is when the user checks one or more check boxes in the grid and clicks the button in the grid's toolbar, I'd like the main application script (in index.html) to be notified of it and be passed a list of the selected row ids for processing.

I should note that I originally had all of the code in one huge script block in the index.html page and it was working fine. It was when I decided to get fancy and pull all of the gridpanel code out into its own file that things stopped working. Everything still displays fine, but when the button is clicked nothing happens.

In my CcmcGrid.js file I'm registering the custom event in the initComponent function:


this.addEvents('resendClick');

Then, later in the initComponent function where I create the button I fire the event:



var btnResend = new Ext.Button({
text: 'Resend',
handler: function() {
this.enableBubble('resend');
this.fireEvent('resendClick', selectionModel.getSelections());
}
});


Lastly, in my main application script (in index.html), I'm setting up the center region configuration like this:



{
region: 'center',
xtype: 'ccmc_grid',
id: 'theGrid',
collapsible: false,
listeners: {
resend: {
fn: function() {
alert("You clicked the resend button");
}
}
}
}


Am I even close to setting this up correctly? I'd imagine there's a fairly simple solution but that I'm just not fully understanding the process. Thanks in advance for your help!

mankz
21 Jul 2010, 10:47 AM
Wild guess, scope issue? :)



var btnResend = new Ext.Button({
text: 'Resend',
scope : this,
handler: function() {
this.enableBubble('resend');
this.fireEvent('resendClick', selectionModel.getSelections());
}
});

Animal
21 Jul 2010, 11:01 AM
What's the event you want to fire? "resend" or "resendClick"???

bmcelhany
21 Jul 2010, 11:25 AM
Sorry about that...'resendClick' is the correct event. I had made some changes and forgot to change them back. At any rate, adding
scope: this did the trick! I'll need to dig through the api a bit to get a better understanding of scope, but this gets me past my roadblock. Thanks!