Question

我有树梢。在某些特定情况下，我想在鼠标上显示图像并在treenode中删除mouseleave上的图像。但是当我快速悬停鼠标时，图像会被添加，但不会被删除，因为itemmouseleave事件没有被触发。我已经准备好了jsfiidle来理解我试图在mouseenter和mouseleave上更改节点文本的问题。在慢动作上，它工作正常，但如果快速悬停，即使我们离开节点，它也会显示mouseenter。

链接到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
    }
  ]
});

我想删除mouseleave上的图像。感谢

Answer 1

为此添加了手动解决方法。在快速鼠标悬停上，itemmouseleave事件不会被触发。所以我维护一系列悬停节点和节点的鼠标中心，检查数组是否包含元素，然后设置该节点的文本。

为此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
}]

}）;

如果我们快速移动光标，则不会调用itemmouseleave事件

1 个答案: