extjs - ExtJS如何在 Controller 中处理组件的元素相关事件？

Question

我有一个Panel，我需要为该面板的元素捕获/处理mouseover event。

当前，我通过使用以下监听器扩展ExtJS面板来实现此目的(如here建议):

...

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

...

可以通过ExtJS controller完成吗？这样我就可以在一个 Controller 中处理事件了吗？

Answer 1

您处在正确的轨道上，但还没有完全到达目标。 Controller 的工作是控制组件而不是元素。如果要使元素的mouseover事件在组件级别可用，只需将其重新激发为独特的“mypanelmouseover”事件，然后在Controller的control()中使用它即可。
干净利落。

编辑:

方法如下:

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

希望这可以帮助。主要思想是保持声明性并解耦代码，而不是创建不可读的回调链。一个不错的副作用是，您可以控制一切，并可以决定要重新触发哪些事件以及何时触发，以及如何对它们使用react。