PDA

View Full Version : Tooltip in grid



Ronaldo
5 Jan 2012, 6:02 AM
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
5 Jan 2012, 9:32 AM
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
6 Jan 2012, 2:39 AM
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