Assigning listeners in config does not apply the handlers to a panel

[luismerino]

Ext.define('MyApp.view.Add', {
    extend: 'Ext.Panel',
    
    config: {
        fullscreen: true,
        layout: 'card',
        items: [
            {
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    pack: 'center',
                    align: 'center'
                },
                items: [
                    {
                        xtype: 'panel',
                        html: 'Justin Beefer'
                    }
                ]
            }
        ],
        listeners: {
            painted: function() {
                console.log('foo');
            }
        }
    },

When creating a new instance, the listeners won' tbe fired, however when using on()/addListener() upon the instance, then the events work. What's going on?

[mitchellsimoens]

When creating new classes, using on() is the preferred way to add listeners. This gives you the flexibility to add listeners when you instantiate the class.

[jay@moduscreate.com]

You should use the following pattern:

Ext.define('MyApp.view.Add', {
    extend: 'Ext.Panel',
    
    config: {
        fullscreen: true,
        layout: 'card',
        items: [
            {
                xtype: 'panel',
                layout: {
                    type: 'vbox',
                    pack: 'center',
                    align: 'center'
                },
                items: [
                    {
                        xtype: 'panel',
                        html: 'Justin Beefer'
                    }
                ]
            }
        ]
    },
    initialize : function() {
       this.on({
             scope  : this,
            painted : this.onPainted
        });
        this.callParent();
    },
    onPainted : function() {
         console.log('foo');
    }
})