グリッドセルのクリックイベントでツールチップを設定

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