Disabled Field: Ext.fly is null in Internet Explorer

**skirtle** · 19 Jan 2012 7:59 PM

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

**mitchellsimoens** · 20 Jan 2012 12:07 PM

Thanks for the report.

**Ryan Phung** · 7 Jun 2012 10:10 PM

Hi,

I can confirm that this bug happens in Ext 4.1.0 as well. I've tested in IE8.

May I know if there is any progress fixing this bug?

Thanks,
- Ryan

**prijithkr** · 5 Dec 2012 11:11 PM

Working great, hope it doesnt affect any other event triggers

**webfriend13** · 23 Jan 2013 7:15 PM

Hi Guys,

Any idea when this bug will be fixed ?

Disabled Field: Ext.fly is null in Internet Explorer

Thread Tools

Search Thread

Display

Disabled Field: Ext.fly is null in Internet Explorer

Disabled Field: Ext.fly is null in Internet Explorer

Thanks for the patch

Thanks for the patch

Any updates on fix for this bug

Any updates on fix for this bug