View Full Version : Grid header tooltip fix

28 Dec 2007, 7:17 AM
I put together a fix that allows you to define a tooltip for each column header.

Add a tip property to the Col Model

width: 7,
tip: 'Startup costs',
header: "Startup $",
sortable: true,
dataIndex: 'startup'

Define the view to use in the grid creation code:

view: new Ext.ux.GridView2({forceFit: true}),

Here is the extended GridView. There may be an easier way to do this but this works.

Ext.ux.GridView2 = function(config){
Ext.apply(this, config);

Ext.extend(Ext.ux.GridView2, Ext.grid.GridView,{
initTemplates : function(){
var ts = this.templates || {};
ts.master = new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
'<div class="x-grid3-resize-marker">&#160;</div>',
'<div class="x-grid3-resize-proxy">&#160;</div>',

ts.header = new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',

ts.hcell = new Ext.Template(
'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id}" style="{style}"><div ' +
'ext:qtip="{tip}" {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',

ts.body = new Ext.Template('{rows}');

ts.row = new Ext.Template(
'<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
(this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),

ts.cell = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>',

for(var k in ts){
var t = ts[k];
if(t && typeof t.compile == 'function' && !t.compiled){
t.disableFormats = true;

this.templates = ts;

this.tdClass = 'x-grid3-cell';
this.cellSelector = 'td.x-grid3-cell';
this.hdCls = 'x-grid3-hd';
this.rowSelector = 'div.x-grid3-row';
this.colRe = new RegExp("x-grid3-td-([^\\s]+)", "");
// private
renderHeaders : function(){
var cm = this.cm, ts = this.templates;
var ct = ts.hcell;

var cb = [], sb = [], p = {};

for(var i = 0, len = cm.getColumnCount(); i < len; i++){
p.id = cm.getColumnId(i);
p.value = cm.getColumnHeader(i) || "";
p.style = this.getColumnStyle(i, true);
p.tip = cm.config[i].tip;
if(cm.config[i].align == 'right'){
p.istyle = 'padding-right:16px';
cb[cb.length] = ct.apply(p);
return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'});

28 Dec 2007, 1:25 PM
Thanks for sharing. Note that in this example, there is no need for inheritance -- it's usually better to use Ext.override when adding simple patch code.

I just checked a similar change into SVN -- in my version it will use QuickTips if available, but default to the header's title attribute if QuickTips is not available. Also, the new ColumnModel config is "tooltip" (not "tip") as that's more consistent and also what it was called before in 1.x.

28 Jan 2008, 3:40 PM
Thanks for sharing this pice of code.
This example works fine for me, but i have already used the 'view' option in Ext.grid.EditorGridPanel for displaying the group by option. How can I use multiple 'view' objects in Ext.grid.EditorGridPanel??

grid = new Ext.grid.EditorGridPanel({
view: new Ext.grid.GroupingView({
//custom grouping text template to display the number of
//items per group
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

view: new Ext.ux.GridView2({forceFit: true}),

when I run the program, it displays the tip but I have lost my other options, which I have defined first.

Please help.

1 Feb 2008, 12:11 PM
Thanks for sharing this pice of code.
This example works fine for me, but i have already used the 'view' option in Ext.grid.EditorGridPanel for displaying the group by option. How can I use multiple 'view' objects in Ext.grid.EditorGridPanel??
You can't.
Thats the limitation of such extensions implemented as inherited classes.

It would be possible if these extension would be plugins - though sometimes plugins are harder to write.

However you could hack the the code of GroupingView and GridVie2 into a single view class....

1 Feb 2008, 12:13 PM
and note also the reply by brian.moeskau, this feature is now in ext!
so there is no need to use this extension - just use the GroupingView

1 Feb 2008, 5:36 PM
Sorry Vivid Planet, but I tried with version 2.0.1 and still the "ToolTip" property in the column Model doesnt work. Any ideas on how to make this simple?


1 Feb 2008, 11:12 PM
It does work in Ext 2.0.1 (use 'tooltip' and not 'ToolTip'!)

5 Feb 2008, 3:42 PM
Hi Guys,

Thanks for the fixes with the new version of ExtJS.
It works for me!

Here is a snapshot:

Here is the code:

colModel = new Ext.grid.ColumnModel([
header: "Stock No.",
dataIndex: 'dealer_stock',
width: 60,
align: 'left',
sortable: true,
tooltip : 'Dealer Stock Number',
editor: new Ext.form.TextField({
allowBlank: false

I appreciate the help from Condor, Vivid-planet, Brian.moeskau and Marmstrong.
Keep up good works guys!
Thank you!

8 Feb 2008, 6:28 AM

I can't seem to get tooltips to work on grid headers.

I'm just trying to add it to the simple example grid - http://extjs.com/deploy/dev/examples/grid/array-grid.html. I've added
tooltip:'Company' to the first column config and called
Ext.QuickTips.enable() and it's using 2.0.1.

There isn't anything else I need to do is there?

Cheers, Kev.

8 Feb 2008, 6:34 AM

IIRC, i believe it's


8 Feb 2008, 7:21 AM
Thanks, it was my mistake actually. Somehow I didn't have all the changes made in 2.0.1. 8-|