PDA

View Full Version : Ext.ux.plugins.grid.CellToolTips



BitPoet
12 Feb 2009, 12:17 PM
I'm trying my hands by announcing my first plugin, CellToolTips, here. It's a small plugin for the GridPanel to add different tooltips to individual rows of a grid. Each column tooltip has its own XTemplate that is dynamically filled from the underlying data record.

The 'magic' behind the plugin is that only a single ToolTip is created for the whole grid, making it quite memory friendly.

Note: to work in Ext 2, it needs Animal's triggerElement (http://extjs.com/forum/showthread.php?p=265259#post265259) override for the ToolTip.

Sources:

The source can be found here.
(http://www.chrwinter.de/ext3/CellToolTips3.js)
A demo is here (http://www.chrwinter.de/ext3/CellToolTips3.html).

Let me know what you think.

medusadelft
13 Feb 2009, 7:41 AM
It doesn't work in IE6 or IE7....

But in FF it does work. Nice.

BitPoet
14 Feb 2009, 12:27 AM
Thanks for the feedback. Made a stupid copy&paste mistake, now the demo also works in IE and Chrome.

zhw511006
14 Feb 2009, 5:47 AM
Great !Thank you For Sharing!

It Works nice!

Scorpie
15 Feb 2009, 11:22 PM
These kind of improvements are really nice! Thanks!

Animal
16 Feb 2009, 12:24 AM
FYI, the delegate config, and the triggerElement property of Tooltip are going to be in 3.0, so when you upgrade, you can remove the override which adds these capabilities.

Scorpie
16 Feb 2009, 1:39 AM
FYI, the delegate config, and the triggerElement property of Tooltip are going to be in 3.0, so when you upgrade, you can remove the override which adds these capabilities.

I vote for a renaming of your description from "ExtJS Support Team" to "ExtJS Ultimate Guru" B)

suntory217
29 Sep 2009, 12:44 AM
My tooltip doesnt work well when I use a table in tpl, here is my code:

Ext.onReady(function(){

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);
var grid_tip_tpl =
'<table border="0" width="600">'+
'<tr >'+
'<td width="200"><b>comapny </b> {company}</td>'+
'<td width="200"><b>price </b> {price}</td>'+
'<td width="200"><b>change </b> {change}</td>'+
'</tr>'+
'<tr >'+
'<td width="200"><b>lastchange </b> {lastchange}</td>'+
'<td width="200"><b>company-price </b> {company}-{price}</td>'+
'<td width="200"><b>change </b> {change}</td>'+
'</tr>'+
'</table>';

var cellTips = new Ext.ux.plugins.grid.CellToolTips([
{ field: 'company', tpl: grid_tip_tpl },
{ field: 'change', tpl: '<b>Change: </b>{change}' },
{ field: 'lastChange', tpl: '<b>{company}</b><br />Last changed: <i>{lastChange}</i>' }
]);

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid',
plugins: [ cellTips ]
});

grid.render('mygrid-div');

});


The red part is the only change of my code, my project need to use a table to finish the tpl, and it just doesnt work well, the tooltip seemed not well.
here is the screensnap:
http://www.si-nuo.com/images/snap008.jpg

can the writer of the this plugin resolve it?

BitPoet
29 Sep 2009, 3:04 AM
Hi suntory,

the rendering issue is due to the maxWidth setting of the ToolTip that defaults to 300px. If you want to change it, you have to use a more complex configuration like the following:


var grid_tip_tpl =
'<table border="0" width="500">'+
'<tr >'+
'<td width="133"><b>comapny </b> {company}</td>'+
'<td width="133"><b>price </b> {price}</td>'+
'<td width="134"><b>change </b> {change}</td>'+
'</tr>'+
'<tr >'+
'<td width="133"><b>lastchange </b> {lastchange}</td>'+
'<td width="133"><b>company-price </b> {company}-{price}</td>'+
'<td width="134"><b>change </b> {change}</td>'+
'</tr>'+
'</table>';

var cellTips = new Ext.ux.plugins.grid.CellToolTips({
tipConfig: {
maxWidth: 500
},
ajaxTips: [
{ field: 'company', tpl: grid_tip_tpl },
{ field: 'change', tpl: '<b>Change: </b>{change}' },
{ field: 'lastChange', tpl: '<b>{company}</b><br />Last changed: <i>{lastChange}</i>' }
]
});
Be aware that the maximum for maxWidth is 500px, which is a built-in value in the Ext.ToolTip (http://www.extjs.com/deploy/ext-2.3.0/docs/?class=Ext.ToolTip&member=maxWidth) class itself, so your 600px table will be too wide in any case. You'll either have to adapt your tip layout to fit into the 500px or override the ToolTip class.

suntory217
29 Sep 2009, 5:38 PM
BitPoet:
Thanks very much, I modify the maxValue according to your suggestion and it work very well.
Your reply is so in time. I have to thank you a million times. Thanks.

mohaaron
21 Jul 2010, 12:43 PM
Can anyone tell me what sets how long the tip stays open? I would like to be able to make it stay open as long as the mouse is over the grid cell. I have been looking over the code and don't see what sets this value. Is this possible?

Thanks

BitPoet
21 Jul 2010, 10:37 PM
You can pass all regular configuration options of Ext.ToolTip to the CellToolTips in the tipConfig property. To avoid auto-hiding the tip after a certain amount of time you need to set dismissDelay to zero, to hide immediately on exiting the cell hideDelay must also be zero.


new Ext.ux.plugins.grid.CellToolTips({
tipConfig: {
dismissDelay: 0,
hideDelay: 0
},
/* ... reminder of celltooltips config ... *

mohaaron
22 Jul 2010, 9:34 AM
Thank you for the help. I have added the code you gave me but it's still not working. The tip is disappearing after about three seconds. Am I doing something wrong?

Here is my grid plugin code.


plugins: [
this.search,
new Ext.ux.ComboLoader(),
new Ext.ux.plugins.grid.CellToolTips({
tipConfig: {
dismissDelay: 0,
hideDelay: 0
}
},
[{ field: 'Notes', tpl: '{Notes}'}]
)
],

mohaaron
22 Jul 2010, 9:45 AM
After trying some more of the Ext.ToolTip options it seems that nothing I do has any effect. I have tried closable: true and I don't get a close button.

thirstypixel
30 Jul 2010, 9:57 AM
Hey guys... has anyone successfully gotten this plugin to work for multiple cells on the same row? Doesn't appear to be working, although with just one cell it works perfectly. If I can get it working I will reply with the fix.

thirstypixel
30 Jul 2010, 10:00 AM
Btw here is my example tip config. It seems to work fine for the first column you mouse over, but if you mouse over a second column it doesn't perform the ajax request.



var cellTips = new Ext.ux.grid.CellToolTips({
tipConfig: {maxWidth: 125},
ajaxTips:[{field:'name', tpl: grid_tip_tpl, url:'/CoItems/toolTip'}, {field:'status', tpl: po_status_tpl, url:'/CoItems/statusTip'}]
});

thirstypixel
30 Jul 2010, 10:08 AM
Oops, disregard my last two posts. It works perfectly out of the box, it was some modification I did to the plugin that was causing the problem :)

thirstypixel
30 Jul 2010, 10:50 AM
I can confirm the same problem as mohaaron though, no ToolTip config options seem to work, tried about 10 from the API.

Not sure why, I can see in the source that my config options are getting applied correctly right before the tooltip is created.



Ext.apply(this.tipConfig, {
target: tgt,
delegate: '.x-grid3-cell-inner',
trackMouse: true,
renderTo: document.body,
finished: false,
closeable: true,
autoHide: false,
});
print_r(this.tipConfig);
this.tip = new Ext.ToolTip(this.tipConfig);

ws_hgo
31 Oct 2010, 7:37 PM
Thank you for sharing

sand123
3 Nov 2010, 2:44 AM
What i would suggest is to allow using function for sending data to template instead of record data. I mean that not all data stored in record which i need to use in tooltip. Now this function is used after ajax call. It be better to move it one level higher: if fn is defined, then it will be called before template render with record data. If url is defined, then this function will be applied to ajax call response

BitPoet
3 Nov 2010, 10:15 AM
Thanks for your suggestion, I've modified my example source here (http://www.chrwinter.de/ext3/CellToolTips3.html) to also apply the tip fn to the data used in non-Ajax tooltips. Let me know if that's what you need. The extension code itself can be found at this url (http://www.chrwinter.de/ext3/CellToolTips3.js). Just for clarification though, the fn function will be applied before, not after the Ajax call. The reason I implemented it was to allow the function to create the correct request data for already existing Ajax services. In my example I've added an "afterFn" configuration property to the CellToolTip which can be used to post-process the Ajax return data in the same way.

sand123
5 Nov 2010, 5:27 AM
Exactly what I was need. Thanks

sand123
5 Nov 2010, 11:28 AM
And one more question: what is the purpose of overriding trackMouse: true in tooltip config, ignoring if tipConfig in plugin instance has different value?

jstrx
9 Nov 2010, 11:24 PM
Thanks BitPoet! Awesome plugin. Now to figure out how to get it to play nice with Saki's RowActions

edit: There is a minor bug in this plugin where none of the tipConfig options will get applied if you pass an array of objects when creating the cell tooltips. Here is a fix:


init: function(grid) {
if( ! this.ajaxTips ) {
return;
}
this.tipTpls = {};
this.tipFns = {};
this.tipAfterFns = {};
this.tipUrls = {};
// Generate tooltip templates
Ext.each( this.ajaxTips, function(tip) {
this.tipTpls[tip.field] = new Ext.XTemplate( tip.tpl );
console.log('logging tip', tip);
if( tip.url ) {
this.tipUrls[tip.field] = tip.url;
}
if( tip.fn )
this.tipFns[tip.field] = tip.fn;
if( tip.afterFn )
this.tipAfterFns[tip.field] = tip.afterFn;
if (tip.tipConfig)
this.tipConfig = tip.tipConfig;
}, this);
// delete now superfluous config entry for ajaxTips
delete( this.ajaxTips );
grid.on( 'render', this.onGridRender.createDelegate(this) );
} // End of function init

BitPoet
12 Nov 2010, 9:18 AM
Thankx jstrx, don't know how I didn't notice this before. The online version is fixed now. Let me know in case there are any issues together with the RowActions plugin.

BitPoet
12 Nov 2010, 9:28 AM
And one more question: what is the purpose of overriding trackMouse: true in tooltip config, ignoring if tipConfig in plugin instance has different value?

I don't remember exactly whether this was on purpose or just plain lazyness on my part. I guess I couldn't imagine not being able to move the tooltip anyway, as I'm constantly annoyed when popups hide parts of the data I'm trying to compare :)

The current online version now uses applyIf instead of apply for the trackMouse property, so it can be overridden in the tipConfig.

sunyi
26 Nov 2010, 11:09 PM
Thanks for the feedback. Made a stupid copy&paste mistake, now the demo also works in IE and Chrome.
it doesn't work in IE6. How to fix the problem?please help me

driesva
26 Jan 2011, 12:38 AM
it doesn't work in IE6. How to fix the problem?please help me

I think the issue is a comma in the plugin source code:


...
Ext.applyIf(this.tipConfig, {
trackMouse: true,
});
...

If you delete the comma after true, it should work.

TonyBones
20 May 2011, 4:36 PM
Noticed when I add anchor to tipConfig it causes a double ajax POST, but also anchors the tooltip to the left side right where I want it. weird



tipConfig = {
dismissDelay: 0,
hideDelay: 0,
trackMouse: false,
anchor: 'left' // this is causing a double POST, but it also keeps the tooltip on the screen
}

Matt Bittner
23 Apr 2012, 2:47 PM
Does anyone still have the code for this plugin? I can't find it on the Sencha site.

Thank you.

jstrx
23 Apr 2012, 3:40 PM
Does anyone still have the code for this plugin? I can't find it on the Sencha site.

Thank you.

Lucky for you i'm still subscribed to this thread and I never delete anything! Attached, but had to rename it to a .txt