View Full Version : [FIXED] 5.0.1 use viewcontroller scope in listener instead of component like the api doc

2 Oct 2014, 12:26 PM
We had a regression when we moved to Ext JS 5.0.1. Old listener are receiving for scope the viewcontroller instead of the component. In particular, with menu.

2 different developers in two different projects were hit by this.

I looked at the documentation and it's still saying that I should receive the component, and in any case, it's kind of breaking backward compatibility.

Gary Schlosberg
2 Oct 2014, 3:47 PM
Thanks for the report. Can you please post a test case which exhibits the issue you are facing?

Phil Guerrant
6 Oct 2014, 9:38 AM
Without a test case it's hard to say for sure what your issue is, but you may need to set
defaultListenerScope (http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.mixin.Bindable-cfg-defaultListenerScope): true on your component if you want listeners to resolve to that component instead of to a ViewController further up the hierarchy.

More in depth description of how scope resolution works was discussed in a recent blog post: http://www.sencha.com/blog/declarative-listeners-in-ext-js-5/

7 Oct 2014, 4:04 AM
you may need to set
defaultListenerScope (http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.mixin.Bindable-cfg-defaultListenerScope): true on your component if you want listeners to resolve to that component instead of to a ViewController further up the hierarchy.

Your workaround is working. However, my understanding is that it should not be needed. The code below receiving bad scope in afterrender is not using listener name but a direct function.

Ext.define('MyApp.view.Base.BaseGrid', {
extend: 'Ext.grid.Panel',
columnLines: true,
config: {
showToolbarOptions: {
refresh: true,
exportBut: true,
views: true,
quickFilter: true,
search: true
currentViewLabel: 'My View',
userViews: [],
systemViews: []
listeners: {
afterrender: function () {
var me = this; //***** this is the controller!!!
var menu = me.buildMenu(),
toolbar = me.getToolbar();
if (toolbar) {
if (menu) {
// have to add as a child to this grid view to use the same controller

Phil Guerrant
9 Oct 2014, 5:25 AM
I see your point. It would be more intuitive to use the component instance as the scope if you've given us an inline function instead of a method name. I'll see what it takes to get this fixed in a future release.

Another possible workaround is to use scope:'this'. The scope resolution mechanism will resolve the string "this" to the component instance

9 Oct 2014, 8:22 AM
Thanks for your consideration. Just to make sure it is clear, that behavior changed from 5.0.0 to 5.0.1 without any documentation changes. Also, each time I read the documentation my understanding is that 5.0.0 behavior is what is expected.

I think we need some kind of action item and so a bug, feature request, or documentation update should be assigned to this forum thread.

Phil Guerrant
25 Nov 2014, 8:58 AM
@SebTardif I'm trying to create a simple test case so I can make sure we have the correct behavior in future releases. I've created the following fiddle, but it doesn't seem to fail as you are describing:


Are you able to narrow your problem down to a small test case?

Any chance you are using scope:'controller' anywhere in your code?

25 Nov 2014, 9:32 AM
I was originally not able to create a Fiddle about it but happened on two different apps, and reproducible always.

I think the problem is gone, and this bug sound like it -> EXTJS-14701 Listeners declared on class have an incorrect default scope when passing a function reference

Also, I just tried to figure out again when it started to work but many nightly build have been removed from fiddle.sencha.com.