View Full Version : [FIXED] Accessing DOM events directly from a child element of a Component

21 Mar 2011, 5:05 PM
Cross post from 4.x Help where I didn't get a response.

I am having trouble binding two different DOM event listeners to the same element.

In the following code example, the only event that fires is the mouseout event. If I remove the mouseout listener the mouseover listener fires correctly. It appears that the last one wins.

Should I not be able to bind two different DOM events to the same element or is this a bug?

Ext.define('Square', {
extend: 'Ext.panel.Panel',
alias: 'widget.square',

initComponent: function(){
Ext.apply(this, {
width: 50,
height: 50,
listeners : {
mouseover: {
element : 'el',
fn : function(event, el) {
console.log('over', arguments);
mouseout: {
element : 'el',
fn: function(event, el) {
console.log('out', arguments);


Ext.onReady(function() {
Ext.create('widget.square', {
renderTo: Ext.getBody()

Jamie Avins
22 Mar 2011, 12:24 PM
This is a bug, we'll keep this thread updated with the progress.

7 Aug 2011, 9:32 PM
Has long been fixed. [FIXED-EXTJSIV-1938] and works in 4.0.2a