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

Question

我有一个面板，我需要捕获/处理此面板元素的鼠标悬停事件。

目前，我通过使用以下侦听器扩展 ExtJS 面板来做到这一点（如此处建议）：

...

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

...

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

Answer 1

你在正确的轨道上，只是还没有完全到那里。控制器的工作是控制组件而不是元素。如果您想让元素的鼠标悬停事件在组件级别可用，只需将其重新触发为不同的“mypanelmouseover”事件并在控制器的 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
            }
        });
    }
});

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

Answer 2

您可以在组件呈现后附加侦听器：

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

Answer 3

我认为添加该功能的唯一方法是更改​​ Panel 组件的库源。我认为这不是一个好主意，因为它可能会因为所有额外的听众而减慢您的网站速度，但这就是您的做法。

http://docs.sencha.com/ext-js/4-1/source/Panel.html#Ext-panel-Panel 查找“me.addEvents”以查看 ExtJS 决定授予访问权限的事件。您可以在那里添加鼠标悬停事件，然后在控制器中添加侦听器。

你到底在为那个听众做什么？如果您只是向面板的 div 元素添加一个类，那么您可以只使用 overCls 配置http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

看起来只有少数组件支持 mouseover 事件。是否可以将此鼠标悬停功能分离为菜单或按钮组件？

Answer 4

每个组件都有“getEl”方法。使用此方法获取 Dom 元素，然后在其上注册事件。