Question

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

目前我通过使用以下监听器扩展ExtJS Panel（如建议的here）来做到这一点：

...

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

...

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

Answer 1

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

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

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决定授予访问权限的事件。您可以在那里添加mouseover事件，然后在控制器中添加侦听器。

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

看起来只有少数组件支持鼠标悬停事件。是否可以将此鼠标功能分为menu或button组件？

Answer 4

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

Answer 5

@Alexander Tokarev 关于你的托管监听器如何将'mypanelmouseover'连接到元素的'mouseover'，直到我偶然发现其他地方的另一个例子，我感到困惑。你的mon调用（mon（item，ename，[fn]，[scope]，[opt]））缺少ename（事件名称）参数。

me.mon（me.getEl（），'mouseover'，function（）{this.fireEvent（'mypanelmouseover'）}，me）;

很抱歉发布此答案，代码编辑被拒绝，我没有足够的代表发表评论！

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

5 个答案: