ExtJS how to handle a component's element-related events in controller?

Question

I have a Panel and I need to capture/handle the mouseover event for the element of this panel.

Currently I do this by extending the ExtJS Panel with the following listener (as suggested here):

...

listeners: {
    mouseover : {
        element : 'el',
        fn : function(){
            console.log('captured mouseover');
        }
    }
},

...

Can it be done via the ExtJS controller? So that I have the event handling in one controller?

Answer 1

You're on the right track, just not completely there yet. Controller's job is to control components not elements. If you want to make element's mouseover event to be available at the component level, just refire it as distinct 'mypanelmouseover' event and use that in Controller's control().
Nice and neat.

EDIT:

Here's how to do it:

Ext.define('My.Panel', {
    extend: 'Ext.panel.Panel',

    constructor: function(config) {
        var me = this;

        me.callParent(arguments);

        me.addEvents(
            'mypanelmouseover'
        );
    },

    afterRender: function() {
        var me = this;

        me.callParent();

        // Declarative style with listeners reads better,
        // but this is shorter and does the same
        me.mon(me.getEl(), 'mouseover', function() {
            this.fireEvent('mypanelmouseover')
        }, me);
    }
});

Ext.define('My.Controller', {
    extend: 'Ext.app.Controller',

    init: function() {
        var me = this;

        me.control({
            'panel': {
                mypanelmouseover: me.onMyPanelMouseover
            }
        });
    }
});

Hope this helps. The main idea is to keep being declarative and decouple your code instead of creating unreadable callback chain. A nice side effect is that you're in control and can decide which events you want to refire and when, and how to react to them.

Answer 2

You could attach the listener after the component renders:

Ext.define('My.controller.A', {
    extend:'Ext.app.Controller',

    init: function(){ 
        this.control({
            'panel1':{
                afterrender: function(cmp){
                    cmp.getEl().on('mouseover', this.panel1_mouseOver);
                }
            }
        });
    },

    panel1_mouseOver: function(e, t, eOpts){
        alert('mouseover');
    }
});