1. #1
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    290
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default Tooltip in grid

    Tooltip in grid


    Hi,

    I'm testing the 4.1 beta release and I'm having some problems with the tooltip for a cell in a grid.

    Code:
    onViewAfterRender: function(view) {
            view.tip = Ext.create('Ext.tip.ToolTip', {
                target: view.el,
                delegate: '.x-grid-cell-inner',
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    beforeshow: function updateTipBody(tip) {
                        var rowEl = Ext.get(tip.triggerElement).findParentNode('.x-grid-row');
                        var record = view.view.getRecord(rowEl);
                        tip.update('ID "' + record.data.ID);
                    }
                }
            });
        },
    I managed to find the record, but how can I find the column (or the field that's displayed in the column)?
    Most documentation I find tells about a tip.triggerElement.cellIndex but that property seems to have vanished... ?

    Best regards,
    Ronald
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,024
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    I would use a renderer on the column:

    Code:
    {
        header : 'Company',
        dataIndex : 'company',
        renderer : function(val, meta, record) {
            meta.tdAttr = 'data-qtip="Some String"';
    
            return val;
        }
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    290
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Hi Mitchell,

    Thx for your quick response!

    What I'm trying to do is to give a field based tooltip for an edit-in-place grid, where I want to display an error message containing the reason that the record could not be saved.
    Saving the record is a batch action, I can edit the complete grid and then save it in one action.
    I'm returning an array of errors for every record, pointing out on a per-field basis what's wrong. Records that are ok are saved, for records that can not be saved this array is returned.
    I'm writing this as a plugin, so it can be used for any grid.

    To display the error, I need the record and the field (or fieldname, or the cell) that the mouse is hovering.
    With your solution, I'd have to add a renderer to every column in every grid.

    AFAIK, there used to be a tip.triggerElement.cellIndex property but that has vanished.

    And I think I remember a method on the view that allowed you to find a cell based on the XY coordinates (so based on tip.triggerElement.targetXY I could find the row and column) but I can't find that anymore.

    Anyway, I managed to get it working like this:

    Code:
    Ext.define('Twensoc.grid.plugin.BatchErrorGridPlugin', {
        extend: 'Ext.AbstractPlugin',
        alias: 'plugin.batcherrorgridplugin',
        uses: [ ],
        init : function(grid) {
            this.grid = grid;
            grid.store.on('write', this.onWrite, this);
            grid.on('render', this.onViewRender, this);
        },
        destroy: function() {
            this.grid.store.un('write', this.onWrite, this);
            this.grid.store.un('render', this.onViewRender, this);
            delete(this.grid);
        },
        onWrite: function(store, o, opts) {
            var r = Ext.JSON.decode(o.response.responseText), errs=r.errors;
            if(errs) {
                // Process errs and save them in the record
            }
        },
        onViewRender: function(view) {
            view.tip = Ext.create('Ext.tip.ToolTip', {
                target: view.el,
                delegate: '.x-grid-cell',
                trackMouse: true,
                renderTo: Ext.getBody(),
                listeners: {
                    scope: this.grid,
                    beforeshow: function updateTipBody(tip) {
    // Find the row/record
                        var tE = tip.triggerElement, 
                            record = this.view.getRecord(Ext.fly(tE).findParentNode('.x-grid-row'));
    // Find the colum index by finding the triggerElement's 'indexOf' based on
    // it's position under its parent Element
                        var i = 0, cols = Ext.DomQuery.select('.x-grid-cell', tE.parentElement);
                        while(i<cols.length) {
                            if(cols[i] === tE) {
                                var dataIndex = this.view.getHeaderAtIndex(i).dataIndex;
                                tip.update('Over '+dataIndex+' containing '+record.data[dataIndex]);
                                break;
                            }
                                i++;
                        }
                    }
                }
            });
        }
    });
    And that gives me the dataIndex and thus the value of the record field in the tooltip. It's a bit of ugly solution, but it's also good enough for now.

    Best regards,
    Ronald
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

Thread Participants: 1

Tags for this Thread