Tooltip in grid

[Ronaldo]

Hi,

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

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

[mitchellsimoens]

I would use a renderer on the column:

{
    header : 'Company',
    dataIndex : 'company',
    renderer : function(val, meta, record) {
        meta.tdAttr = 'data-qtip="Some String"';

        return val;
    }
}

[Ronaldo]

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:

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