ExtJS如何在控制器中处理组件的元素相关事件？

Question

我有一个小组,我需要捕捉/处理鼠标悬停事件的元素这个面板的.

目前我通过使用以下监听器扩展ExtJS Panel(如此处所示)来实现此目的:

...

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

...

可以通过ExtJS控制器完成吗？这样我在一个控制器中处理事件？

Answer 1

你是在正确的轨道上,还没有完全在那里.控制器的工作是控制组件而不是元素.如果你想让元素的鼠标悬停事件在组件级别可用,只需将其重新命名为不同的'mypanelmouseover'事件并在Controller的控件()中使用它.
很好,很整洁.

编辑:

这是怎么做的:

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

希望这可以帮助.主要思想是保持声明性并解耦代码,而不是创建不可读的回调链.一个很好的副作用是你可以控制并决定你想要重发的事件以及何时以及如何对它们做出反应.