PDA

View Full Version : [FIXED][3.0] mouseenter



INeedADip
20 Apr 2009, 1:32 PM
When using the 3.0 core Beta my script was working just fine, but now it seems like the event "mouseenter" doesn't work...using RC1

I've got something like: var items = Ext.select('#navTop li');
And that returns two elements,

But the items.hover(function(){console.info("here");}); doesn't work.

I can't use items.on('mouseenter', function(){}); either, 'mouseover' works..but mouse enter does not.

Is this working for anyone else?

One more thing, I've wanted to use just the ext-core.js from the RC release, but I get an error that says TaskManager() is not a constructor...is anyone else having these problems?

Animal
21 Apr 2009, 2:39 AM
I'll move this to Bugs.

Condor
21 Apr 2009, 2:51 AM
Did you take into account that in Ext 3.0 Core, Ext.select always returns a CompositeElementLite?

Try:

items.each(function(el){
Ext.get(el).hover(function(){
console.info("here");
});
});

Animal
21 Apr 2009, 5:04 AM
Ext.get("el-id").on("mouseenter... doesn't work either.

evant
21 Apr 2009, 6:11 AM
Just to confirm, your mouseenter works in core but not in RC1?

Animal
21 Apr 2009, 6:46 AM
No, actually, in the latest code it works fine.

I tried that on a pre-pre-release build of Ext 3.0.

INeedADip
21 Apr 2009, 9:07 AM
As of yesturday,
It worked on the Beta Core you guys released a week or two ago. Then when the RC1 came it broke.

So it works in the Beta, but not in the RC1....I don't have access to any SVN stuff, I'm only comparing the Beta and RC releases this month.

INeedADip
21 Apr 2009, 9:29 AM
I just re-downloaded the RC and replaced the ext-core.js Beta with the RC, and now I get a "TaskRunner is not a constructor" error...then
"Ext.onReady is not a function" probably because of the Ext.util.TaskRunner problem...

mschwartz
21 Apr 2009, 9:32 AM
I'm seeing sporadic Ext.fly(undefined) type errors which I suspect are due to some flaw in mouseenter or similar logic. Seems to happen with firebug open and moving the mouse over a grid as it's being loaded.

Not the same as the HTMLDiv.parent bug in Firefox.

aconran
21 Apr 2009, 11:48 AM
mschwartz -

If you are able to regenerate a testcase which reliably reproduces this issue please post it for us.

mschwartz
21 Apr 2009, 1:03 PM
I have it on my screen now, but I'm not sure I can produce some simple test case (yet) to post.

Basically, I have a tree in a west region of a border layout and a tab panel in the center. When I click on a tree node, it opens a new tab or activates an existing one. Just now I clicked on two nodes, one after another and firebug stopped.

Ext.fly(el) is null ext-all-debug.js, line 2106
Looks like (scrolling back) it is in within() of Ext.EventObject:


2014 within : function(el, related, allowEl){
2105 var t = this[related ? "getRelatedTarget" : "getTarget"]();
2106 return t && ((allowEl ? (t == Ext.getDom(el)) : false) || Ext.fly(el).contains(t));
2107 }
Stack is
within()
trackExit()
h

'this' is:


Object browserEvent
browserEvent mouseout clientX = 873, clientY=498
explicitOriginalTarget = html.ext-strict
't' is div.x-grid3-cell-inner

I can't reproduce it every time, but it seems to happen (each time it does happen) when I have the mouse over either an existing/rendered grid and a tab is added with another grid.

I'm using the tap panel's default hide mode, as well as the tabs.

The Tabs are Panels with grids in fit layout. This is so the tabs/panels can have their own listeners separate from the grids.

mschwartz
21 Apr 2009, 1:03 PM
Forgot to mention.

Once I get this error, I hit continue on the script tab in firebug and the program runs again. If I close firebug, the error pops up right away.

Infinite loop of sorts, no way to close firebug.

In fact, with firebug open and I mouse over the grid, the error triggers again.

mschwartz
21 Apr 2009, 1:06 PM
OK, really narrowed it down.

It's not over the grid.

If I open a tab and then jiggle the mouse over the tree panel's overflow scrollbars, it happens every time.

Animal
21 Apr 2009, 1:36 PM
You can see where the null el is coming from by going back through the call stack.

mschwartz
22 Apr 2009, 4:56 AM
You can see where the null el is coming from by going back through the call stack.

Stack isn't all that useful, perhaps.

within()
trackExit()
h

in trackExit, the line that calls within() is:



26852 trackExit : function(e){
26853 if(this.lastOverNode && !e.within(this.lastOverNode.ui.getEl())){
26854 this.onNodeOut(e, this.lastOverNode);
26855 delete this.lastOverNode;
26856 Ext.getBody().un('mouseover', this.trackExit, this);
26857 this.trackingDoc = false;
26858 }
26859 }


I can certainly repeat it every time now.

I think it's related to a bug in firefox itself, though I'll try to repeat it with IE7 and report if the bug exists there, too.

If you have some Ext element with overflow scrollbars and jiggle the mouse over that (and likely the scrollbars) while a grid is being loaded/rendered (into a tab), it happens every time. The dev team should be able to produce a test case to see it in action.

No, I can't reproduce it in IE.

mschwartz
22 Apr 2009, 4:58 AM
this.lastOverNode is a tree node.

Condor
22 Apr 2009, 6:31 AM
Are you perhaps moving your mouse from/to a XULElement (like a scrollbar)?

mschwartz
22 Apr 2009, 6:36 AM
Are you perhaps moving your mouse from/to a XULElement (like a scrollbar)?

Likely, but this isn't showing up like the well known Firefox parentNode bug. The one with the try/catch fix around it that still makes Firebug complain (and stop).

Once everything is rendered, I can jiggle the mouse like crazy and the bug doesn't show. The parentNode bug does show up randomly/rarely after things are rendered.

Also, once this.lastOverNode is set and the bug appears, I have to close the browser and restart the application or any time I move the mouse over any Ext elements, firebug stops at the same point.

mschwartz
7 May 2009, 7:03 AM
Bumpity bump bump bump

I think the error is related to Ext not removing event handlers properly.

Consider I have a tree for which I dynamically create the node structure. The tree building logic does an Ext.Ajax.request() to fetch the node information and then rebuilds the tree using logic like this:



while (root.firstChild) {
var c = root.firstChild;
root.removeChild(c);
c.destroy();
}
recurse(root, treedata[0]);


While this logic is going on, jiggle the mouse over the tree and the error occurs. So c.destroy() may not be removing the event listeners on the nodes and child nodes, or I am doing this wrong.

I've taken to doing a tree.disable() and tree.enable() around all this, which puts a mask over the tree so no events can occur; probably a good idea since the user really shouldn't be allowed to click on nodes while the tree is being regenerated.

And yeah, the tree does change dynamically depending on external events, so it does need to be rebuilt like this.

mschwartz
8 May 2009, 4:56 AM
http://extjs.com/forum/showthread.php?t=60637&page=4

I notice in this thread a related issue.

It seems to me there is a race condition regarding mouseenter and mouseleave. If you mouse over a tree node and the code is rebuilding the tree (in my example), you have a pending mouseleave for a node that no longer exists.

I am certain the issue exists with grids and lists and dataviews and many other controls.

A simple test case is to use a TaskRunner to do a store.reload() on a grid every second and then jiggle the mouse over the grid. Do not have a loadMask for the grid...

I think the issue is in the destroy() method which needs to remove the pending mouseleave event for a node (or whatever other thing such as grid row).

aconran
8 May 2009, 7:13 AM
mschwartz -

Does this error occur if you don't have "Break on All Errors" turned on in firebug?

mschwartz
8 May 2009, 7:42 AM
mschwartz -

Does this error occur if you don't have "Break on All Errors" turned on in firebug?

Yes it does.

I also have a form in a window with 3 combo boxes. Just jiggling the mouse over the triggers causes the firefox bug 'Permission denied to get property HTMLDivElement.parentNode bug to happen every time. Firebug stops at this line:

try { cchild = child.parentNode; } catch (e) { return false; }

in ext-base.js

Firebug stops even with options "Track Throw/Catch" unchecked.

mschwartz
8 May 2009, 7:58 AM
Examining child:
className: 'anonymous-div'
firstChild, lastChild: '5/13/2009' nodeName: '#text nodeType: 3 nodeValue: '5/13/2009'
offsetParent: 'div#ext-gen1004.x-form-field-wrap'
parentNode: 'input#ext-comp-1231.x-form-text 05/13/2009'
textContent: '05/13/2009'
parent: 'img#ext-gen1005 s.gif'

Which leads me to consider some sort of hack may be possible.

Like return false if parent is s.gif, or insert a div (or other type) element as the first in the body and stop ascending the tree when you hit that element.

Or is offsetParent more useful?

Or maybe even better, instead of going up the DOM tree from child, go down the DOM tree from parent.

hendricd
8 May 2009, 8:05 AM
Yep, the problem is that the textNode should not be included in the equation. The latest event emulation fixes (http://extjs.com/forum/showthread.php?p=327225#post327225)might resolve most of that.

mschwartz
8 May 2009, 8:21 AM
I formatted this one routine in ext-base.js and hacked it a little. The firefox bug no longer occurs in my most repeatable case for producing the error.



function elContains(parent,child){
if (parent.firstChild == null) {
return false;
}
while(child){
if(child===parent){
return true;
}
try{
child=child.parentNode;
}
catch(e){
return false;
}
if(child&&(child.nodeType!=1)){
child=null;
}
}
return false;
}

mschwartz
8 May 2009, 8:23 AM
Yep, the problem is that the textNode should not be included in the equation. The latest event emulation fixes (http://extjs.com/forum/showthread.php?p=327225#post327225)might resolve most of that.

Indeed.

I think you might look at the bolded bit in my post above and consider it and other tests on the parent node to avoid any loops at all.

hendricd
8 May 2009, 8:32 AM
Revised to:


function elContains(parent, child) {
if(parent && parent.firstChild){
while(child) {
if(child === parent) {
return true;
}
try {
child = child.parentNode;
} catch(e) {
// In FF if you mouseout an text input element
// thats inside a div sometimes it randomly throws
// Permission denied to get property HTMLDivElement.parentNode
// See https://bugzilla.mozilla.org/show_bug.cgi?id=208427

return false;
}
if(child && (child.nodeType != 1)) {
child = null;
}
}
}
return false;
}

mschwartz
8 May 2009, 8:33 AM
FWIW, I absolutely cannot reproduce the protection error/firefox bug at this point with just the above fix.

Been trying for only ~5 minutes or so, though.

aconran
18 May 2009, 7:26 AM
Tommy has committed the fixes for this mouseenter issue. Please provide us feedback if SVN is not currently working for you.