1. #1
    Ext User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    mahe4us is on a distinguished road

      0  

    Question show quicktips while mouseover a row in grid

    show quicktips while mouseover a row in grid


    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

  2. #2
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    One possibility would be to iterate over the grid's rows and add create an Ext.ToolTip for each one:
    Code:
    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.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    It might be better to add an override:

    Code:
    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

    Code:
        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.

  4. #4
    Ext User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    mahe4us is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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

  6. #6
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    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.

  7. #7
    Ext User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    mahe4us is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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.

  9. #9
    Ext User
    Join Date
    Jun 2008
    Posts
    11
    Vote Rating
    0
    mahe4us is on a distinguished road

      0  

    Default


    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

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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.