Ext.ux.plugins.grid.CellToolTips

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 override for the ToolTip.

Sources:

The source can be found here.

A demo is here.

Let me know what you think.

It doesn't work in IE6 or IE7....

But in FF it does work. Nice.

Thanks for the feedback. Made a stupid copy&paste mistake, now the demo also works in IE and Chrome.

Great !Thank you For Sharing!

It Works nice!

These kind of improvements are really nice! Thanks!

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.

Quote:

---

Originally Posted by Animal

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)

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?

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:

Code:

---

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

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.