show quicktips while mouseover a row in grid

[mahe4us]

Hi,

Iam a newbie for extjs. I would like to show a quicktip while mouseover a row in grid. I have searched for the entire forum a full day but I didnt get any correct link.... Any one help me how to achieve this.... Really Iam very thankful to you guys if anybody give solution to that...

Thanks

[BitPoet]

One possibility would be to iterate over the grid's rows and add create an Ext.ToolTip for each one:

var gp01 = new Ext.grid.GridPanel({
    id:    'gp01',
    ....
});

var tttpl = new Ext.Template( '<b>Field 1: {fld1}</b><br />{fld2} - {fld3} - {fld4}<br />Just a tooltip' );
make_tooltips( 'gp01', tttpl );

function make_tooltips( gpid, tpl )
{
    var gp = Ext.getCmp(gpid);
    for( var i = 0; i < gp.getStore().getCount(); i++ )
    {
        var rec = gp.getStore().getAt(i);
        var newtt = new Ext.ToolTip({
            title:    'Testing ToolTips',
            html:     tttpl.apply( rec.data ),
            target:    gp.getView().getRow(i)
        });
    }
}

I believe there might still be more elegant solutions, but I haven't delved into QuickTips and ToolTips too deep myself.

[Animal]

It might be better to add an override:

Ext.override(Ext.Tooltip, {
    onTargetOver : function(e){
        if(this.disabled || e.within(this.target.dom, true)){
            return;
        }
        this.clearTimer('hide');
        this.mouseTarget = e.getTarget();
        this.targetXY = e.getXY();
        this.delayShow();
    }
});

Then just add one Tooltip to the GridView's element.

And then in the beforeshow event, you could get the mouseTarget property, and use it to

    theGrid.getView().findRowIndex(mouseTarget);

Which would get the index of the row which the mouse was over when the pop up was triggered, and you could set the content dynamically.

[mahe4us]

Hi,

Thankyou guys for your great replies. I have worked with Bitpoet's coding and it works fine with Extjs2.1. But when Iam done this with Extjs2.2 its not working.... I dont know why it happens?

Thanks

[Animal]

Very inefficient creating a Tooptip for every row on every load.

[BitPoet]

It shouldn't make a difference whether you're using 2.1 or 2.2 (I initially tested the code on 2.2 and it ran without glitches). But Animal is right, you should prefer his approach to mine, as my solution creates a tooltip for every row in the grid (also allocating quite some memory) while his only instatiates the tooltip when it is really required.

[mahe4us]

Hi,

I have used Animal's approach that override Tooltip. But Iam not able to set value for html config. If supposed I given value in html, then all the tooptip showed the same value instead of different values. So I have used settitle option. I have given below my code

Ext.override(Ext.ToolTip, {
onTargetOver : function(e){
if(this.disabled){
return;
}
this.clearTimer('hide');
this.mouseTarget = e.getTarget();
this.targetXY = e.getXY();
this.delayShow();
}
});

var tttpl = new Ext.Template( 'Field 1: {company}<br />{price} - {change} - {pctChange}<br />Just a tooltip' );
var newtt = new Ext.ToolTip({
title: 'Testing ToolTips',
tpl: tttpl,
theGrid: grid,
target: grid.getView().el,

listeners:{
beforeshow:function(){
var rIndex = this.theGrid.getView().findRowIndex(this.mouseTarget);
var record = this.theGrid.getStore().getAt(rIndex);
if(record !=null){
this.setTitle(this.tpl.apply(record.data));
//this.html = this.tpl.apply(record.data);
}
}

}
});

Also in the basic array grid examples of extjs2.2 the grid.getSelectionModel().selectFirstRow() is not working..

Thanks.

[Animal]

Have you debugged by setting a breakpoint in your beforeshow handler to find out why the correct data is not being displayed?

Setting this.html is not going to do much is it really? When you think about it.

[mahe4us]

Hi Animal,

Thanks for your such a great replies. I have crosschecked the value inside the beforeshow handler and I got the each value correctly. But its not displayed inside the tooltip. Whats the problem occured is if I applied through setTitle(), all the datas inside the tooltip are bold by default. Its not happened if I applied through HTML option... Maybe I asked you repeatedly some simple things... But I really dont know how to solve this.....

Onemore thing Animal, this is not really relating with this post, but I want to dispose this to you. In the basic array grid examples of extjs2.2 the grid.getSelectionModel().selectFirstRow() is not working.. Pls visit this URL
http://www.extjs.com/deploy/dev/exam...rray-grid.html

Thanks

[Animal]

Setting html is only going to work the first time, before the Tooltip has been rendered.

What you must do is creat the Tooltip with renderTo: document.body so it is rendered.

Then use this.body.dmo.innerHTML = "The HTML to display".

selectFirstRow needs to wait until there is a first row to select. Do it on a defer.