Ir para conteúdo


Foto

Configurar tooltip em evento de clique na célula do grid

tooltip cellSelector grid celula

  • Por favor, faça o login para responder
1 resposta neste tópico

#1 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 05 July 2016 - 09:46

Olá, Pessoal

 

Estou tentando mostrar uma tooltip quando o usuário clicar em uma célula do grid. Quando eu clico em uma célula, a tooltip aparece. O problema é que, após o clique, ela fica aparecendo sempre que eu passo o mouse sobre qualquer outra célula.

 

Deixarei abaixo o código de como estou tratando o evento cellclick no controller e a forma como estou criando a tooltip.

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;                    

                    }                
                }
            });
        }                               
    }

Agradeço a ajuda desde já..



#2 Marcelo Augusto

Marcelo Augusto

    Member Avançado

  • Membros
  • PipPipPip
  • 232 posts
  • LocationCaicó, Rio Grande do Norte

Postado 06 July 2016 - 09:01

Encontrei uma solução para o meu problema, mas deixarei em aberto para o caso de alguém dar uma solução melhor.

Bom, para que a tooltip só aparecesse quando eu clicasse e sumisse quando eu movesse o mouse, adicionei um evento no controller chamado itemmouseleave. Desta forma, quando o item, sob o qual está o mouse mudar, eu destruo a tooltip adicionada àquela view. O código final ficou da seguinte forma:

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






Tópicos que também usam as tags tooltip, cellSelector, grid, celula:

0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos