PDA

View Full Version : 'Ext.fly(...)' is null or not an object



franksencha
8 Dec 2011, 2:19 PM
I got following errors on IE 8. Please help!
Thanks in advance,
Frank



Message: 'Ext.fly(...)' is null or not an object
Line: 11386
Char: 13
Code: 0
URI: http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js

Message: 'Ext.fly(...)' is null or not an object Line: 11386 Char: 13 ext-all-debug.js

skirtle
8 Dec 2011, 11:44 PM
That line is deep in the event handling mechanism, it could be caused by just about anything.

Hit F12 to load the debugger. Inspect the call stack to try to get a sense for what exactly what was going on. Inspect the variables to see if there are any hints there too.

If that doesn't help, try commenting out sections of your code to isolate exactly which part induces the error.

Upgrading to 4.0.7 may also be worth a quick try.

When asking a question about a specific browser (IE8 in this case) it's always worth mentioning which other browsers you've tried. It can be enlightening to know that it works in FF, IE7, IE9, etc.

franksencha
21 Dec 2011, 6:33 AM
It happened only for IE. At least don't have any impact for FF and Chrome.
The error keeps popup on the screen when mouse moves. and not only happens on mouse moving, but also on other time or keys.

The application is pretty big with more than 10000 lines for that single page/screen. so almost no way to comment out or take more time to solve unrelated problems come out.
try v4.0.7 ? Here's the error but on the deffent lines comparing to v4.0.2a
--------------------------------------------------------------------
Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Wed, 21 Dec 2011 14:53:20 UTC

Message: 'Ext.fly(...)' is null or not an object
Line: 11824
Char: 13
Code: 0
URI: http://..../ext-all-debug.js

Message: 'Ext.fly(...)' is null or not an object
Line: 11824
Char: 13
Code: 0

skirtle
22 Dec 2011, 11:18 PM
One thought that occurs, do you have an element (or component) with a crazy id?

You're going to have to step in with the debugger. There's a good chance it'll be easy to figure out what's going on if you inspect the variables and the stacktrace.

franksencha
23 Dec 2011, 11:39 AM
1. update to version 4.0.7 have no help for this bug. (updated)
2. this is a type of event/event bubble/event chain bug and debug event driven bug has few help to find it(if you have any good IE debug tool please recommend)
3. crazy Id may not a case because there's no issue with FF and Chrome.

Thanks.

skirtle
23 Dec 2011, 12:44 PM
Given your problem is with just IE8, you should quickly check you don't have any stray commas.


1. update to version 2.0.7 have no help for this bug.

I assume you mean 4.0.7.


2. this is a type of event/event bubble/event chain bug and debug event driven bug has few help to find it(if you have any good IE debug tool please recommend)

The debugger built in to IE8/9 should be sufficient to dig in to this. Try walking back up through the call stack and inspect the variables and function arguments along the way, see what you find. Somewhere along the line you're ending up with a null or undefined where you shouldn't be, probably right near the top of the stack.

xuzicn
29 Dec 2011, 10:14 PM
Meet the same problem in IE 7 & 8. Didn't test in IE 9

Call stack is too simple and I don't think it is valuable:
JScript anonymous
anonymous
wrap

I am using ext 4.0.7. Script stop at ext-all-debug.js row 11824
this.target is null thus Ext.fly returns a null value.

xuzicn
29 Dec 2011, 10:56 PM
Here comes updated info.

I tracked a function which is built by Ext.functionFactory in Ext.EventManager.createListenerWrap, this function leads this error:

function anonymous(e, options, fn, scope, ename, dom, wrap, args) {
var Ext=window.ExtBox1;if(!Ext) {return;}
e = Ext.EventObject.setEvent(e);
var t = e.getTarget(".x-resizable-handle", this);
if(!t) {return;}
fn.call(scope || dom, e, t, options);
}


I noticed that sometimes e.srcElement is null so EventManager cannot find the event source. Below code helps to avoid this issue but I am not sure this change will affect other events or not:


Ext.EventObjectImpl.prototype.getTarget = function (selector, maxDepth, returnEl) {
if (this.target == null) return null;
if (selector) {
return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
}
return returnEl ? Ext.get(this.target) : this.target;
};

franksencha
3 Jan 2012, 6:19 AM
Thanks and Agreed. Any comments from Sencha experts?
If that's a proper fix, please confirm and hope it could be in upcoming updated version.

franksencha
18 Jan 2012, 6:11 AM
------------------------------~o)

hendricd
18 Jan 2012, 8:49 AM
@frank --

Get current: 4.0.7. Much has changed since 4.02

franksencha
18 Jan 2012, 9:05 AM
Here's the copy of the #3. And try new version is always the first suggestion from sencha ?
Please help!

Tried v4.0.7. Here's the error but on the deffent lines comparing to v4.0.2a
--------------------------------------------------------------------
Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Wed, 21 Dec 2011 14:53:20 UTC

Message: 'Ext.fly(...)' is null or not an object
Line: 11824
Char: 13
Code: 0
URI: http://..../ext-all-debug.js (http://..../ext-all-debug.js)

Message: 'Ext.fly(...)' is null or not an object
Line: 11824
Char: 13
Code: 0

hendricd
18 Jan 2012, 9:10 AM
@frank -- yes, line numbers are likely to be different between releases (things change) ;)

99.99% of the time - If it works on all other browsers except IE, it usually means you have an unwanted comma somewhere in YOUR script.

Run it through jslint.com and report back.

franksencha
18 Jan 2012, 9:24 AM
Thanks hendricd. Cannot get all the .js files work separately(post to jslint.com). The application is pretty big. The situations are happen randomly by moving mouse around the screen. It's a event related. Please see xuzicn's post.

Thanks in advance.

hendricd
18 Jan 2012, 9:31 AM
In order to trace down the cause, you'll need to examine the call-stack when the error occurs in IE8's debugger, but you must use ext-all-debug to be effective. Only the call stack will yield enough clues as to why.

franksencha
18 Jan 2012, 10:04 AM
screenshot attached

hendricd
18 Jan 2012, 12:05 PM
ok @frank,

Switch to call stack tab and click on each function (examining the 'locals' tab for each along the way) until you can see what triggered the event in the first place.

xuzicn
19 Jan 2012, 1:15 AM
hendricd

I already wrote down the callstack in #7.
Provide snapshot below:
30823

Or run this code in IE8. You need to click the text box then move mouse in the popup window area quickly.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" language="javascript" src="ext-all-debug.js"></script>
<link type="text/css" rel="Stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onDocumentReady(function () {
Ext.create('Ext.window.Window', {
title: 'Hello',
modal: true,
items: [{
xtype: 'textfield',
fieldLabel: 'name',
value: 'aaa'
}, {
xtype: 'combo',
fieldLabel: 'age',
store: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6]],
disabled: true,
value: 1
}]
}).show();
});
</script>
</head>
<body>
</body>
</html>

skirtle
19 Jan 2012, 2:54 PM
Thanks for the test case, that makes things much easier.

I can reproduce your problem in IE8 now. I'm still digging to figure out what's going on but I've come up with a slightly different test case that fails more readily:


<!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: 85,
layout: 'anchor',
minHeight: 50,
minWidth: 50,
width: 50,
items: [
{
anchor: '100%',
value: 'aaa',
xtype: 'textfield'
}, {
anchor: '100%',
disabled: true,
value: 'bbb',
xtype: 'textfield'
}
]
}).show();
});
</script>
</head>
<body>
</body>
</html>

It seems that the disabled text input is a key part of the problem. I'll let you know how I get on with digging into this...

skirtle
19 Jan 2012, 8:03 PM
I've submitted a bug report here:

http://www.sencha.com/forum/showthread.php?175372

That thread includes details of my attempts to debug this problem, including a patch.

franksencha
20 Jan 2012, 8:12 AM
Thanks skirtle.
Please post an update if the fix becomes available.

nixerella
19 Mar 2012, 2:37 AM
I've just encountered this, I have several disabled textfields in my form. I'm trying to replace them with extjs labels, so I have changed to have a label for the display name and then a label for the value and poke the value in from the controller when it loads the view which works fine.

But I have 2 layout problems - I cannot make the value label go next to the display label, it always ends up underneath and also I can't make the display label line up with the ordinary textfields in my form which have a width of 250. I'm using fit layout on the form, and a css class for display label and another for the value label. I've tried various things in the css like display block and float as well as width but still cannot get the value next to the display label. The css is being picked up because I put a coloured border round each label and that does work. Can anyone help please?

nixerella
19 Mar 2012, 2:59 AM
Sorry I should add I'm using "fit" layout on the window. I haven't specified a layout on the form at all.

thorn
8 Nov 2012, 7:56 AM
Hi there

I get to the same point of frustration - but was happy to find this post!

In IE8 with ExtJS 4.1 I run into the same error message if I disable all the form fields on a window panel with
Ext.getCmp('formId').getForm()._fields.each(function(it){it.disable();})

I remarked also that the error occurs more on fast/many mouse movements and less or none on very slow mouse movement over the input fields (not the xtype:displayfield!)

I think this occurs because of disabled form elements which has onMouse... events on it and IE would trigger that with no objects behind?

I try to override the function getTarget, but it doesn't work with the prototype, but works fine with the Ext.define() function:

Ext.define('Ext.EventObjectImpl', {
override: 'Ext.EventObjectImpl',
getTarget: function(selector, maxDepth, returnEl) {
if (this.target == null) return null;
if (selector) {
return Ext.fly(this.target).findParent(selector, maxDepth, returnEl);
}
return returnEl ? Ext.get(this.target) : this.target;
}
});