PDA

View Full Version : ToolTip on Grid Header



Sneha004
22 Mar 2012, 10:32 PM
Hi All,

I am trying to show tooltip for grid header
The code is as :
{
xtype :'gridpanel',
columns :[
{
xtype : 'actioncolumn',
width : 40,
items : [{
icon : 'images/ignition_on.png',
tooltip : 'Ignition On'
}
]
}]
}

It's not showing the image and tooltip also not working.

Can anyone suggest proper solution for this problem.

Thanks

vietits
22 Mar 2012, 10:46 PM
It's not showing the image

Check your icon url again to make sure it is correct.


and tooltip also not working.

Make sure you have initialized Ext.tip.QuickTipManager. Also, tooltip is applied for each action icon not for the grid header

Sneha004
23 Mar 2012, 1:27 AM
Thanks vietits,

That icon is displaying on rows but not on grid header .
How to display the icon on grid header ?

For tooltip ,Where I should initialize 'Ext.tip.QuickTipManager' ?
And how to use it ?

Please give some references or examples, so that I can find it out.

vietits
23 Mar 2012, 5:19 AM
How to display the icon on grid header ?

To display image in the header of column, you can embed an IMG tag as below (in red color):


{
xtype :'gridpanel',
columns :[{
xtype : 'actioncolumn',
header: '<img src="images/header.png" />',
width : 40,
items : [{
icon : 'images/ignition_on.png',
tooltip : 'Ignition On'
}]
}]
}



For tooltip ,Where I should initialize 'Ext.tip.QuickTipManager' ?
And how to use it ?

To initialize Ext.tip.QuickTipManager, just call Ext.tip.QuickTipManager.init(). You should initialize it at the beginning of your application.

Sneha004
26 Mar 2012, 5:06 AM
Thanks Vietits,

I tried for those two problems.
One problem, Displaying image on column Header is working now.
But the tooltip problem is not solving.
I have initialized Ext.tip.QuickTipManager.init() in the currently working .js file where my grid is defined.
It is not working.
Then I again initialized it in Ext.require(['Ext.tip.QuickTipManager']) in my app.js file where I have written Ext.application() function.

But unfortunately it is also not working.
So, where I should initialize it properly I could not get it.

Please tell me the solution.

vietits
26 Mar 2012, 6:59 AM
If you use Ext.application then QuickTipManager has been initialized. This feature is controlled by the enableQuickTips config which by default is set to true.