L'événement itemmouseleave n'est pas appelé si nous déplaçons le curseur rapidement

Question

J'ai treepanel. Sur certaines conditions spécifiques je veux montrer l'image sur la souris entrer et enlever cette image sur mouseleave dans treenode. mais quand je passe la souris sur la souris, l'image est rapidement ajoutée mais elle n'est pas supprimée car l'événement itemmouseleave ne se déclenche pas. J'ai préparé jsfiidle pour comprendre mon problème dans lequel j'essaye de changer le texte du noeud sur le mouseenter et le mouseleave. au ralenti, cela fonctionne bien, mais si vous bougez rapidement, le centre de souris apparaît même si nous sommes loin du noeud.

Lien vers jsFiddle: http://jsfiddle.net/79ZkX/238/

Ext.create("Ext.tree.Panel", { 
    title: "Car Simple Tree", 
    width: 400, 
    height: 600, 
    store: store, 
    rootVisible: false, 
    lines: true, // will show lines to display hierarchy. 
    useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed 
    renderTo: Ext.getBody(), 
    listeners: { 
    itemmouseenter: function(_this, _item) { 
     var name = _item.get("name"); 
     _item.set("name", "mouseenter"); 
    }, 

    itemmouseleave: function(_this, _item) { 
     //var name = _item.get('name'); 
     _item.set("name", "leave"); 
    } 
    }, 
    columns: [ 
    { 
     xtype: "treecolumn", 
     dataIndex: "name", // value field which will be displayed on screen 
     flex: 1 
    } 
    ] 
}); 

Je veux enlever l'image sur mouseleave. Merci

Answer 1

Solution de contournement manuelle supplémentaire pour ceci. L'événement itemmouseleave de Fast Hover sur la souris ne sera pas déclenché. donc je suis en train de maintenir le tableau du nœud plané et sur le mouseenter du nœud, en vérifiant si le tableau contient l'élément puis en définissant le texte de ce nœud.

ajouté le code à ce jsFiddle: http://jsfiddle.net/79ZkX/250/

Ext.create('Ext.tree.Panel', { 
title: 'Car Simple Tree', 
width: 400, 
height: 600, 
store: store, 
rootVisible: false, 
visibleNodes: [], 
lines: true, // will show lines to display hierarchy.  
useArrows: true, //this is a cool feature - converts the + signs into Windows-7 like arrows. "lines" will not be displayed 
renderTo: Ext.getBody(), 
listeners : { 

    itemmouseenter: function(_this, _item) { 
for (var i = 0; i < this.visibleNodes.length; i++) { 
     var node = this.visibleNodes[i]; 
     node.set('name', "leave"); 
     this.visibleNodes.splice(i, 1); 
    } 
     var name = _item.get('name'); 
     _item.set('name', "mouseenter"); 
     this.visibleNodes.push(_item); 

    }, 

    itemmouseleave: function(_this, _item) { 
      //var name = _item.get('name'); 
     _item.set('name', "leave"); 
    var index = this.visibleNodes.indexOf(_node); 

    if (index != -1){ 
     this.visibleNodes.splice(index, 1); 
    } 
    }, 

}, 
columns: [{ 
    xtype: 'treecolumn', 
    dataIndex: 'name', // value field which will be displayed on screen 
    flex: 1 
}] 

});