PDA

View Full Version : tooltips



Huasheng06
2 Jan 2012, 3:40 AM
hello everyone,
I want to customer a tooltip for every cell for the grid, I have to get the rowIndex and colIndex of the mouse cursor. In the following code i can get the colIndex. but how can I get the rowIndex? thanks.

grid.getView().on('render', function(tempview) {
tempview.tip = Ext.create('Ext.tip.ToolTip', {
target : tempview.el,
width : 100,
height : 100,
delegate : tempview.cellSelector,
trackMouse : true,
renderTo : Ext.getBody(),
listeners : {
beforeshow : function updateTipBody(tip, rowIndex) {
var gridColums = tempview.getGridColumns();
var column = gridColums[tip.triggerElement.cellIndex]; //'tip.triggerElement.cellIndex' is the colIndex
var val = tempview
.getRecord(tip.triggerElement.parentNode)
.get(column.dataIndex);
tip.update(val);
}
}
});
});

mitchellsimoens
2 Jan 2012, 6:16 AM
Please post in the appropriate forum. I have moved this to the Ext JS 4 Q&A forum for you.
Are you trying to have a tooltip special to each cell?

Huasheng06
2 Jan 2012, 6:54 AM
I'm sorry it's my first time to ask here.
Yes, I want to custom tooltip for each cell according to the cell's content, so it's necessary for me to get the rowIndex and colIndex.

mitchellsimoens
2 Jan 2012, 6:56 AM
A column can take a renderer config which is a function. You can then add the attribute 'data-qtip' to a string on the element and if you have done the Ext.QuickTips.init() then it should pick this string up and automatically show a tooltip.

Huasheng06
2 Jan 2012, 7:14 AM
thanks.
but it's difficult for me. Is there some simila example?

mitchellsimoens
2 Jan 2012, 7:23 AM
{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company',
renderer : function(value, meta, record, rowIndex, colIndex, store, view) {
meta.tdAttr = 'data-qtip="Test"';
return value;
}
}