PDA

View Full Version : [OPEN-1420] Ext.TreePanel hovered node flickering



Tom23
24 Nov 2010, 4:33 AM
Ext version tested:
3.2.1

Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

IE8


Operating System:

WinXP Pro


Description:

Moving your mouse around inside a div.x-tree-node in an Ext.tree.TreePanel causes flickering, because the CSS class .x-tree-node-over is repeatedly removed and added.


Test Case:
Any Ext.tree.TreePanel

Debugging already done:

Ext.tree.TreeNodeUI.onOver() and onOut() are called erroneously while mouse is moved around.
Reason: Ext.tree.TreeEventModel fails to detect wether the mouse is inside a tree node div.
Ext.tree.TreeEventModel.getNodeTarget() does not return the node target when hovering over the icon!?
Seems to me that Ext.tree.TreeEventModel.trackExit() is totally useless and appears to exist to "fix" this very bug.


Possible fix:

Ext.override(Ext.tree.TreeEventModel, {
getNodeTarget: function (e) {
// why would we want to return the icon here ??
return e.getTarget('.x-tree-node-el', 6);
},
delegateOver: function (e, t) {
if (!this.beforeEvent(e)) {
return;
}
/*if (Ext.isGecko && !this.trackingDoc) {
Ext.getBody().on('mouseover', this.trackExit, this);
this.trackingDoc = true;
}*/ // huh?
if (this.lastEcOver) {
this.onIconOut(e, this.lastEcOver);
delete this.lastEcOver;
}
if (e.getTarget('.x-tree-ec-icon', 1)) {
this.lastEcOver = this.getNode(e);
this.onIconOver(e, this.lastEcOver);
}
if (t = this.getNodeTarget(e)) {
this.onNodeOver(e, this.getNode(e));
}
},
delegateOut: function (e, t) {
if (!this.beforeEvent(e)) {
return;
}
if (e.getTarget('.x-tree-ec-icon', 1)) {
var n = this.getNode(e);
this.onIconOut(e, n);
if (n == this.lastEcOver) {
delete this.lastEcOver;
}
}
if ((t = this.getNodeTarget(e)) && !e.within(t, true, true)) {
this.onNodeOut(e, this.getNode(e));
}
},
onNodeOver: function (e, node) {
if (node == this.lastOverNode) {
return;
}
this.lastOverNode = node;
node.ui.onOver(e);
},
onNodeOut: function (e, node) {
delete this.lastOverNode;
node.ui.onOut(e);
}
});