PDA

View Full Version : Ext.ux.grid.HeaderToolTip



deister
6 May 2011, 3:10 AM
A very simple extension to add tooltips to grid column headers:




/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace Ext.ux.grid
*
* Text tooltips should be stored in the grid column definition
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
alias: 'plugin.headertooltip',
init : function(grid) {
var headerCt = grid.headerCt
grid.headerCt.on("afterrender", function(g) {
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: headerCt.el,
delegate: ".x-column-header",
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function(tip) {
var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id +']');
if (c && c.tooltip)
tip.update(c.tooltip);
else
return false;
}
}
});
})
}
});

cntx
8 Jun 2011, 3:22 AM
pretty nice, thx

asmweb
4 Oct 2011, 6:35 AM
Hello,

I can not make it work using a MVC app. It fails on init function...

twaindev
4 Oct 2011, 1:26 PM
Perhaps it's failing because this line
var headerCt = grid.headerCtis missing a semi-colon.

After fixing this it works in my MVC app.

Here is my version:

/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace Ext.ux.grid
*
* Text tooltips should be stored in the grid column definition
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
alias: 'plugin.headertooltip',

init: function (grid) {
var headerCt = grid.headerCt;

headerCt.on("afterrender", function () {
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: headerCt.el,
delegate: ".x-column-header",
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function (tip) {
var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id + ']');

if (c) {
tip.update(c.tooltip || c.text);
return true;
}

return false;
}
}
});
});
}
});

asmweb
4 Oct 2011, 2:45 PM
Hi there, thank you for your answer but I could manage to make it work by myself. Misstypo problem.

c2c-bacardi
8 Mar 2012, 12:34 PM
Right away I experienced an issue where hovering between a column with a tooltip and one without a tooltip would prevent the tooltip from showing again until you mouse out from the header container and mouse back in.

Adding tip.clearTimers() before returning false in the beforeshow event addressed this issue:



/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace ux.grid
*
* Text tooltips should be stored in the grid column definition
*
* Sencha forum url:
* http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
alias: 'plugin.headertooltip',
init : function(grid) {
var headerCt = grid.headerCt;
grid.headerCt.on("afterrender", function(g) {
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: headerCt.el,
delegate: ".x-column-header",
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function(tip) {
var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id +']');
if (c && c.tooltip) {
tip.update(c.tooltip);
} else {
tip.clearTimers();
return false;
}
}
}
});
});
}
});

usmanc
18 May 2012, 1:45 PM
My deepest apologies for such a noob question (and I feel dumb for asking) but how do I use this extension? requires: ['Ext.ux.grid.HeaderToolTip']? plugins: ['Ext.ux.grid.HeaderToolTip']?

And then tooltip in the column definition?
columns: [{text : 'Name', flex:1, sortable : true, dataIndex: 'personName', tooltip: 'test'}]

No combination I try is working and I am starting the QuickTipManager... Ext.tip.QuickTipManager.init(); at the top.



Right away I experienced an issue where hovering between a column with a tooltip and one without a tooltip would prevent the tooltip from showing again until you mouse out from the header container and mouse back in.

Adding tip.clearTimers() before returning false in the beforeshow event addressed this issue:

c2c-bacardi
18 May 2012, 1:54 PM
I use:


plugins: ['headertooltip']

-Kevin

usmanc
18 May 2012, 2:02 PM
Thank you, Kevin!

rebel-l
14 Aug 2012, 12:32 AM
I have had a problem with locked columns, because headerCt is moved into "sub grids" on locking. See my fixed version:



/**
* @class Ext.ux.grid.HeaderToolTip
* @namespace ux.grid
*
* Text tooltips should be stored in the grid column definition
*
* Sencha forum url:
* http://www.sencha.com/forum/showthread.php?132637-Ext.ux.grid.HeaderToolTip
*/
Ext.define('Ext.ux.grid.HeaderToolTip', {
alias: 'plugin.headertooltip',
init : function(grid){
if( grid.headerCt ) {
this.initColumnHeaders( grid.headerCt, grid );
} else if( grid.lockable ){
this.initColumnHeaders( grid.lockedGrid.headerCt, grid );
this.initColumnHeaders( grid.normalGrid.headerCt, grid );
}
},
initColumnHeaders: function( headerCt, grid ) {
headerCt.on("afterrender", function(g) {
grid.tip = Ext.create('Ext.tip.ToolTip', {
target: headerCt.el,
delegate: ".x-column-header",
trackMouse: true,
renderTo: Ext.getBody(),
listeners: {
beforeshow: function(tip) {
var c = headerCt.down('gridcolumn[id=' + tip.triggerElement.id +']');
if (c && c.tooltip) {
tip.update(c.tooltip);
} else {
tip.clearTimers();
return false;
}
}
}
});
});
}
});


... works with 4.0.7, with 4.1.1 it isn't working because of missing clone() method. has anybody a workaround for that?

Vincent2012
15 Nov 2012, 12:26 AM
a good plugin!thanks.