View Full Version : 'multiple' renderers ?

20 Jul 2009, 7:46 AM
Hi guys,
I have the following problem. I need to highlight the contents of a specific grid column so I am using 'renderer' as shown in the code snippet:

this.cm = new Ext.grid.ColumnModel([
header: 'Header,
dataIndex: 'expressionText',
renderer: function(data, cell, record, rowIndex, columnIndex, store) {
return record.get('expressionTextHighlight');
sortable: true,

I also want to use a tooltip each time mouse is over that data (tooltip text is the content of the grid cell). Although I have implemented the corresponding method (see the following code snippet), I cannot apply it since I already use the renderer for highlighting.

this.showExprToolTip = function(val) {
Ext.apply(Ext.QuickTips.getQuickTip(), {
dismissDelay: 0,
trackmouse: true
return '<span ext:qtip="' + val + '">' + val + '</span>';

Is it possible to somehow combine both functionalities (highlighting and tooltips) ? Could I have, let's say, multiple renderers? if yes how should I use them? Thanks in advance

20 Jul 2009, 7:53 AM

20 Jul 2009, 8:18 AM
Use this renderer for your column model:

function(value, metaData, record, rowIndex, colIndex, store) {
metaData.attr = 'ext:qtip="'+value+'"';
return value;

Then use event listener to call Ext.QuickTips.init() whenever rows are added/removed/modified/reloaded. I know it works because I'm using this trick on my grid panel myself. But I'm not sure if there will be memory leakage from calling Ext.QuickTips.init() multiple times though ..