Grid header tooltip fix

[marmstrong]

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.ux.GridView2.superclass.constructor.call(this);
};
Ext.extend(Ext.ux.GridView2, Ext.grid.GridView,{
initTemplates : function(){
var ts = this.templates || {};
if(!ts.master){
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>",
'<div class="x-grid3-resize-marker">&#160;</div>',
'<div class="x-grid3-resize-proxy">&#160;</div>',
"</div>"
);
}

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

if(!ts.hcell){
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, '" />',
"</div></td>"
);
}

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

if(!ts.row){
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}">',
'<tbody><tr>{cells}</tr>',
(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>' : ''),
'</tbody></table></div>'
);
}

if(!ts.cell){
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>',
"</td>"
);
}

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

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()+';'});
}
});

[brian.moeskau]

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.

[sanjoyroy]

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({
forceFit:true,
//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.

[vivid-planet]

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....

[vivid-planet]

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

[vertigoMX]

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?

regards

[Condor]

It does work in Ext 2.0.1 (use 'tooltip' and not 'ToolTip'!)

[sanjoyroy]

Hi Guys,

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

Here is a snapshot:
http://sanjoy.vaishnavam.net/images/column-header-tooltip.jpg

Here is the code:


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


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

[kevj]

Hey,

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.

[mystix]

Ext.QuickTips.enable()


IIRC, i believe it's


Ext.QuickTips.init();

[kevj]

Thanks, it was my mistake actually. Somehow I didn't have all the changes made in 2.0.1. 8-|