View Full Version : Tooltip on cell in grid, wiered problem on ie6

16 Jul 2010, 1:14 PM
hello All,
I am facing this weird problem when showing tooltip on my grid cells,

// My grid looks like :

var grid = new Ext.grid.GridPanel({
title: 'Date feeds',
id: 'grid',
stripeRows : true,
iconCls: 'icon-grid',
deferRowRender : true,
hidden : true,
columnLines: true,
columns: [

new Ext.grid.RowNumberer(),
{ header: "Account Number", width:100, dataIndex: 'acctId',
renderer: function (v,p) {
p.attr = 'ext:qtitle="' + "Detail " + v + '"';
p.attr += ' ext:qtip=" the detail is... ' + v + '"';
return v;
} },
{header: "Account Name", width:150, dataIndex: 'acctNm'},
store: store,
viewConfig: {
emptyText:'No rows to display',
fbar: [save, '->', cancel]

So when the grid is first rendered, if i take my mouse over the first column Account Number.. i see the tooltip coming
but only when the mouse cursor is over the data under the cell. Any white space in the cell if i take my mouse over there, the toooltip doesnt appear. Technically shouldnt the tooltip should appear over the full cell space ?

Now the wiereder part, if i comment out my new Ext.grid.RowNumberer(), the tip starts appearing on the full cell space and not just on the data being shown.
So what i concluded it, the tip shows on full cell space only on the first column, when i add the same renderer to the next column the tip again doesnt show up on the unused cell space.

Btw everything works fine in FF, i see tips for all the cases.

Any ideas why this may be happening.


19 Jul 2010, 9:31 AM
any ideas on this please ?

19 Jul 2010, 12:14 PM
ok found something, so i remove the doctype from my html page which is :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
the tooltips starts coming perfectly fine in IE6 for all columns.

But then i have this new problem when i remove the doctype it messes up my combo box and on change of it started showing scrollbars at the bottom of the combo.
My combo looks like :

var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
// anchor: '100%',
items: [{
region: 'center',
anchor: '100%',
bodyStyle: 'padding:5px;',
//height: 400,
items: [grid]
region: 'north',
height: 40,
hideBorders : true,
bodyStyle: 'padding:5px;',
xtype : 'panel',
id: 'topPanel',
hideBorders : true,
anchor : '100%',
items: [{
xtype : 'form',
columnWidth: 0.3,
bodyStyle: 'padding:5px;',
labelWidth: 100,
items: [ {
xtype: 'combo',
fieldLabel: 'Date Feeds',
triggerAction: 'all',
editable: false,
name: 'feedsSelect',
emptyText:'Select Feeds...',
id: 'feedsSelect',
store: ['Reporting', 'Dummy1'],
allowBlank: false,
select: function(combo,record,id)
{xtype : 'form',
columnWidth: 0.2,
bodyStyle: 'padding:5px;',
items: [ {
xtype: 'textfield',
fieldLabel: 'Enter Ticket #',
bodyStyle: 'padding:5px;',
id: 'tktNo',
name: 'tktNo'

} ]


Anything wrong here in the config of the combox box ?