在网格单元格上单击事件时设置工具提示

Question

我想在用户单击网格单元格时显示工具提示。当我点击一个单元格时，出现工具提示。问题在于，点击后，只要将鼠标移动到任何其他单元格上，它就会弹出。我使用的是Ext JS 4.2.1。放下代码，因为我正在处理控制器中的CellClick事件以及我创建工具提示的方式。

onCellClick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) { 
var store = Ext.getStore('pontoeletronico');   
if (view.tip) { 
    view.tip.destroy();       
    view.tip = null;    
}   
if(cellIndex > 0 && cellIndex < 5) { 
    view.tip = Ext.create('Ext.tip.ToolTip', { 
     autoShow: false, 
     showDelay: 0,          
     stateful: false, 
     target: view.el, 
     width: 100, 
     title: 'Horário original', 
     delegate: view.cellSelector, 
     trackMouse: false, 
     autoHide: true, 
     listeners: { 
      beforeshow: function (tooltip, eOpts) { 
       var ponto = store.findRecord('id', record.get('idPonto')); 
       var horario; 
       if (cellIndex == 1) { 
        horario = ponto.get('entrada01');       
       } else if (cellIndex = 2) { 
        horario = ponto.get('saida01');       
       } else if (cellIndex == 3) { 
        horario = ponto.get('entrada02');       
       } else if (cellIndex == 4) { 
        horario = ponto.get('saida02');       
       } 
       horario = horario != null ? Ext.Date.format(horario, 'H:i:s') : "--:--:--";      
       //tooltip.update(horario); 
       tooltip.html = horario;      

      }     
     } 
    }); 
}        

Answer 1

我找到了解决我的问题的方法，但是如果有人提供了更好的解决方案，请保持打开状态。

那么，对于工具提示只有当我点击并消失，当我移动鼠标，我在控制器中添加一个名为itemmouseleave的事件。因此，当鼠标变化的项目时，我销毁添加到该视图的工具提示。最终代码如下：

onItemMouseLeave: function (view, record, item, index, e, eOpts) { 
    if (view.tip) { 
     view.tip.destroy(); 
    } 
}, 

onCellClick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) { 
    var store = Ext.getStore('pontoeletronico');   
    if (view.tip) { 
     view.tip.destroy();       
     view.tip = null;    
    }   
    if(cellIndex > 0 && cellIndex < 5) {    
     view.tip = Ext.create('Ext.tip.ToolTip', { 
      itemId: 'tooltip-horario', 
      autoShow: false, 
      showDelay: 0,          
      stateful: false, 
      target: view.el, 
      width: 100, 
      title: 'Horário original', 
      delegate: view.cellSelector, 
      trackMouse: false, 
      autoHide: true 
     }); 
     var ponto = store.findRecord('id', record.get('idPonto')); 
     var horario; 
     if (cellIndex == 1) { 
      horario = ponto.get('entrada01');       
     } else if (cellIndex = 2) { 
      horario = ponto.get('saida01');       
     } else if (cellIndex == 3) { 
      horario = ponto.get('entrada02');       
     } else if (cellIndex == 4) { 
      horario = ponto.get('saida02');       
     } 
     horario = horario != null ? Ext.Date.format(horario, 'H:i:s') : "--:--:--";      
     view.tip.update(horario);          
    }        
}