[Ext 4.1.x] Proposal for listeners enhancement

[willydee]

I prefer to use ExtJS components in a declarative manner, but event binding is a bit tricky. Example:

var cmp = Ext.create('Ext.button.Button', {
  text: 'foo',
  renderTo: Ext.getBody(),
  listeners: {
    afterrender: 'onAfterRender'
  },
  onAfterRender: function() {
    console.log(this);
  }
});

This raises an error because no scope is given and existence of scope is not tested before accessing the method property. Adding scope: this to the listener declaration is not useful because this refers to globalWindow on construction time. So binding handlers to self is only possible by using initComponent() or another template function, which adds unnecessary code.

Proposal for a fix:

Index: extjs-4.1.1-rc1/src/util/Observable.js
===================================================================
--- extjs-4.1.1-rc1/src/util/Observable.js	(revision )
+++ extjs-4.1.1-rc1/src/util/Observable.js	(revision )
@@ -494,7 +494,7 @@
                     Ext.Error.raise('No method named "' + fn + '"');
                 }
                 //</debug>
-                fn = scope[fn] || me[fn];
+                fn = scope && scope[fn] ? scope[fn] : me[fn];
             }
             event.addListener(fn, scope, Ext.isObject(options) ? options : {});

[willydee]

If the current behaviour is considered a bug, please move it to the appropriate forum. Thanks!

[mitchellsimoens]

IMO you should specify the function as the value in that button case.

[willydee]

IMO you should specify the function as the value in that button case.

Mitchell, this was not my intention. I want to be able to add a listener to any component, scoped to itself, but without the need to an extra call to the addListener() method. The code snippet is just a stripped example to show what I want to do, and where it fails. Please review the supplied patch; IMHO it's a small but useful enhancement, especially for MVC applications.

This is the procedural workflow as of today, binding the listener to the instance after the component is created:

var cmp = Ext.create('Ext.button.Button', {
  text: 'foo',
  renderTo: Ext.getBody(),
  onAfterRender: function() {
    console.log(this);
  }
});
cmp.addListener('afterrender', 'onAfterRender', cmp); 

In a MVC based app it would look like this:

Ext.define('App.view.MyButton', {
  extend: 'Ext.button.Button',
  text: 'foo', 
  onAfterRender: function() {
    console.log(this);
  },
  initComponent: function() {
    this.callParent();
    this.addListener('afterrender', 'onAfterRender', this);
  }
}); 

With the patch applied, the initComponent() call could be omitted, and the event binding would be completely declarative:

Ext.define('App.view.MyButton', {
  extend: 'Ext.button.Button',
  text: 'foo', 
  onAfterRender: function() {
    console.log(this);
  },
  listeners: {
    afterrender: 'onAfterRender' // automagically scoped to the component instance
  }
}); 

Got me?

[Nom4d3]

This trick may solve your problem:

Ext.define('App.view.MyButton', { 
   extend: 'Ext.button.Button', 
   text: 'foo',  
   onAfterRender: function() { 
      console.log(this); 
   }, 
   listeners: { 
      scope: this, //All listeners will have the component as scope
      afterrender: 'onAfterRender'
    }
 }); 

[skirtle]

This trick may solve your problem:

I don't think that will work, this will be the global window object, not the component.

Details aside, the underlying suggestion in this thread for allowing string handler names without an explicit scope is a good one. I definitely wouldn't call it a bug though, it's an enhancement.