[OPEN-1420] Ext.TreePanel hovered node flickering

[Tom23]

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