我有一个Panel，我需要为该面板的元素捕获/处理mouseover event。
目前我通过使用以下侦听器扩展 ExtJS 面板来做到这一点（建议 here）：
...
listeners: {
mouseover : {
element : 'el',
fn : function(){
console.log('captured mouseover');
}
}
},
...
可以通过ExtJS controller 完成吗？这样我就可以在一个控制器中处理事件？
【问题讨论】：
标签： extjs extjs4 extjs4.1 extjs-mvc
您在正确的轨道上，只是还没有完全到达那里。控制器的工作是控制组件而不是元素。如果您想让元素的鼠标悬停事件在组件级别可用，只需将其重新触发为不同的“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
}
});
}
});
希望这会有所帮助。主要思想是保持声明性和解耦代码，而不是创建不可读的回调链。一个很好的副作用是您可以控制并且可以决定要重新触发哪些事件以及何时以及如何对它们做出反应。
【讨论】：
fireEvent?我能想出我喜欢的任何活动名称吗？并“重新启动它”，基于什么？该组件在该特定事件处理程序中不可用。
您可以在组件渲染后附加监听器：
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');
}
});
【讨论】：
我认为添加该功能的唯一方法是更改 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
【讨论】：
每个组件都有“getEl”方法。使用此方法获取 Dom 元素，然后在其上注册事件。
【讨论】：