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

Code:

---

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?

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.

You should use the following pattern:

Code:

---

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');
    }
})

---