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

在网格单元格上的click事件上设置工具提示

1 个答案: