marmstrong
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.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"> </div>',
'<div class="x-grid3-resize-proxy"> </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()+';'});
}
});
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"> </div>',
'<div class="x-grid3-resize-proxy"> </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()+';'});
}
});