PDA

View Full Version : Grid cell qtip from outside a cellRenderer



rabbit
2 Apr 2008, 10:36 AM
Hi, I have to add a qtip to a grid cell based on a value of another cell. As I understand, I cannot use the 'attr' property since I cannot use the cell renderer in this case.
I am setting I tried using the 'grid.getView().getCell(1,1).attr' but this does not work since getCell returns the <TD> element and not the extjs cell object. Hence I have to use the title attribute i.e. 'grid.getView().getCell(1,1).title' for now :(

Could anyone help me as to how to use a qtip for a cell from outside a cell renderer ?

rabbit
2 Apr 2008, 11:10 AM
anyone?

Animal
2 Apr 2008, 1:23 PM
Drop this into examples/grid/array-grid.js



Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

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']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
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);

Ext.ToolTip.prototype.onTargetOver =
Ext.ToolTip.prototype.onTargetOver.createInterceptor(function(e) {
this.baseTarget = e.getTarget();
});
Ext.ToolTip.prototype.onMouseMove =
Ext.ToolTip.prototype.onMouseMove.createInterceptor(function(e) {
if (!e.within(this.baseTarget)) {
this.onTargetOver(e);
return false;
}
});

// create the Grid
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, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
onRender: function() {
Ext.grid.GridPanel.prototype.onRender.apply(this, arguments);
this.addEvents("beforetooltipshow");
this.tooltip = new Ext.ToolTip({
renderTo: Ext.getBody(),
target: this.view.mainBody,
listeners: {
beforeshow: function(qt) {
var v = this.getView();
var row = v.findRowIndex(qt.baseTarget);
var cell = v.findCellIndex(qt.baseTarget);
return this.fireEvent("beforetooltipshow", this, row, cell);
},
scope: this
}
});
},
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid',
bbar: new Ext.PagingToolbar({
buttons: [{
text: "Click Me"
}],
store: store,
pageSize: 25
}),
listeners: {
render: function(g) {
g.on("beforetooltipshow", function(grid, row, col) {
// return false here if you don't want to show the tooltip
grid.tooltip.body.update("Tooltip for (" + row + ", " + col + ")");
});
}
}
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});

viulian
6 Apr 2008, 12:23 PM
Impressive code :) Animal.

I've tried various things, but I didn't manage to do one thing: is there a way to hide the tooltips columns > 0 ?
I have a grid in which I show some random forum posts and I'd like the tooltip to contain a preview of the first post in the topic.
It works, but I also see the same text for the column 1, which is the author, and column 2 which is the date.

I tried:



render: function(g) {
g.on("beforetooltipshow", function(grid, row, col) {
if (col == 0)
grid.tooltip.body.update(ds.getAt(row).get('preview'));
else
grid.tooltip.hide();
});
}


I've also tried setVisible(false). However it doesn't hide the thing, I can only clear the body to '' (...body.update('')) but I still get the rounded corners.

Any ideea please ?

Thank you,

Animal
6 Apr 2008, 11:28 PM
Have you tried just returning false if you don't want it to show?

Chemist
29 Apr 2008, 6:50 AM
Excuse me, but when i'm saving this code in examples dir and start it up - when mouse pointer first time gets into the grid area, where must render tooltips - IE7 fails with error "Ext.fly(...) is null & etc..." What can I do with that?

dgms
24 May 2008, 11:35 PM
the same thing happenes to me. can Animal help to solve this?

==============================================
Excuse me, but when i'm saving this code in examples dir and start it up - when mouse pointer first time gets into the grid area, where must render tooltips - IE7 fails with error "Ext.fly(...) is null & etc..." What can I do with that?

Michael Reach
30 Oct 2008, 6:35 AM
Animal, I see that others had the same issue that I'm having: The Tooltip doesn't disappear when it goes to a place where there should be no comment (and returning false doesn't make it disappear, just not appear in the first place), and hide() or disable() don't seem to do it either.
And I too get this weird error in IE, and not in code I can see. And in my own code, unlike yours, the IE error disables the whole page.