在網格單元格上單擊事件時設置工具提示

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