Sencha touch 2 Listeners at Ext.Define

Question

I read sencha docs about event handling and listener configuration. In the listener configuration documentation , I found this note:

Note. Bad practice is to specify a listener configuration when you define a class using Ext.define (). Instead, specify only listeners when you instantiate the class using Ext.create ().

I saw several SO answers with listeners in Ext.define() .

In addition, I went to this blog post about the evils of Ext.define and listeners , but I think it is more relevant for Ext-Js than Sencha Touch 2. And I'm pretty new to Sencha Touch.

Can someone explain the differences in the disadvantages of adding listeners in Ext.define () and what is the difference?

Answer 1

The problem is pretty simple. If you have a listener property in your class, then once you create an instance of the class and add the listener property to that particular instance, it will gong override the list.define listener property. Similar:

 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 ? No. Identical properties are overridden. Similar things happen for listeners.

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

The configuration object that you pass to Ext.create is combined with the Ext.define configuration Ext.define . Thus, its always best not to use the listener property in Ext.define .