REQUIRED INFORMATION

Ext version tested:
  • Ext 4.0.7
  • Ext 4.1.0-beta-1

Browser versions tested against:

The problem occurs for:
  • Internet Explorer 6
  • Internet Explorer 7
  • Internet Explorer 8
  • Internet Explorer 9 in Compatibility Mode

It doesn't appear to be a problem in other browsers.

DOCTYPE tested against:

HTML5 (doesn't appear to matter).

Description:

When using a disabled text field in a window it is possible to see the error 'Ext.fly is null' as the mouse is moved over the window.

Steps to reproduce the problem:

Using the test case below, wiggle the mouse cursor rapidly over the window. Make sure that the cursor passes over the text 'bbb' in the textfield. After a few seconds it will throw an error. Note that it only appears to happen if the cursor moves over the text, moving over the other section of the textfield does not throw an error.

Test Case:

Code:
<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="ext-all.css"/>
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script>
        Ext.onReady(function () {
            Ext.create('Ext.window.Window', {
                height: 60,
                layout: 'anchor',
                minHeight: 60,
                width: 200,
                items: [{
                    anchor: '100%',
                    disabled: true,
                    value: 'bbb',
                    xtype: 'textfield'
                }]
            }).show();
        });
    </script>
</head>
<body>
</body>
</html>
HELPFUL INFORMATION

Debugging already done:

The mouseover/mouseout events for a disabled text input occasionally go crazy. The value of srcElement is null when it should be equal to the input element. Oddly it only seems to happen if the mouse passes over the text itself.

The error 'Ext.fly is null' occurs further down the line as a result of this initial null value. In this test case the window has resize handles that are listening for mouse events. These try to use Ext.EventObject.getTarget with a selector and that blows up because the target is null.

Possible fix:

This patch appears to fix it. I based it on getRelatedTarget. There's a lot more digging to be done to confirm whether this is actually a good way to fix the problem or not. The key question that remains is why is srcElement null in the first place? Is it actually a browser bug or is it a consequence of something more subtle?

Code:
Ext.EventManager.getTarget = function(event) {
    event = event.browserEvent || event;

    var target = event.target || event.srcElement;

    if (!target) {
        if (this.mouseLeaveRe.test(event.type)) {
            target = event.fromElement;
        }
        else if (this.mouseEnterRe.test(event.type)) {
           target = event.toElement;
        }
    }

    return this.resolveTextNode(target);
};