Sencha touch 2 Event listeners in Ext.Define

Question

I was reading the sencha docs about Event handling and the listeners config. In the documentation of the listener config I found this note :

Note: It is bad practice to specify a listener's config when you are defining a class using Ext.define(). Instead, only specify listeners when you are instantiating your class with Ext.create().

I have seen a number of S.O. answers which have listeners in the Ext.define().

Also I came accross this blog post about the evils of Ext.define and listeners but i think this is more relevant to Ext-Js than to Sencha Touch 2. And I am fairly new to Sencha Touch.

Can anyone explain the difference cons of adding listeners in the Ext.define() and what difference does it make?

Swar Swar · Accepted Answer · 2013-05-09T13:31:59

The problem is pretty basic. If you have a listener property in your class, the moment you create an instance of the class and add a listener property to that particular instance, it is gong to override the Ext.define 's listener property. Just like this:

var obj = {
  foo: {
     bar : 'Hello World'
  }
};

obj = Ext.merge(obj, { // Here Ext.merge just to show how two objects can be merged
  foo : 'I just got changed!'
});

Will you get the bar property of foo object? No. Identical properties get overridden. Similar things happen for listeners too.

Ext.define('ABC', {
  config : {
    listeners : {
      'tap' : Ext.emptyFn
    } 
  }
});    

var newPanel = Ext.create('ABC', {
  listeners : {
      'activate' : Ext.emptyFn
  } 
});

The config object you pass in Ext.create is merged with the config object of Ext.define. So, its always a better choice not to use listener property in Ext.define.

Sencha touch 2 Event listeners in Ext.Define

1 Answers