View Full Version : Panel Expand/Collapse Icon Tooltip Solution

2 Feb 2008, 9:26 PM
Good design principles warrant adding a tooltip to the default collapse tool icons. I mined the code and discovered where I can insert a single tooltip message that will display when you mouseover the expand/collapse icon on the panel and accordion panel headers. The solution will work for whatever expand/collapse icon you want to use. The function where the code needs to change is - Ext.Panel = Ext.extend(...) View the attached ZIP for the coding solution. I provided a snapshot of changes made to ext-all.js and ext-all-debug.js.

3 Feb 2008, 10:37 AM
Instead of inside the loop, a better place will be where the tool is created. Inside Panel.js, look for:

id: 'toggle',
handler : this.toggleCollapse,
scope: this

and add the qtip attribute:

id: 'toggle',
handler : this.toggleCollapse,
scope: this,
qtip:"Click to expand/collapse panel"

Also, the text string should be localized to can use it with diferent languages, with, maybe, using a new attribute on Panel class and setting that attribute inside the locales files.

3 Feb 2008, 11:55 AM
Thank you for providing a more elegant solution. I am a novice with the Ext tools. I removed my previous code changes and updated ext-all.js and ext-all-debug.js appropriately. Works great. It would be nice to be able to set the panel collapse tool qtip in the config, versus in the code. I am a strong advocate of localization. I haven't started exploring how to do that using Ext components.

J.C. Bize
5 May 2008, 11:10 AM
I think it would make sense for this to be the default behavior, unless there is an wasy way to override this without editing ext-all.js/ext-all-debug.js.


5 May 2008, 12:51 PM

Yup, I think so as well. Should show tooltip if tooltips are enabled and if possible take some type of toolTipText config option for the tool.

29 May 2008, 2:02 AM
To all novice users:
Normally you don't change ext-all.js and debug files. You normally leave library as is, because if you will upgrade in the future you won't be able to do it in an easy way. So. Make yourself a favour and don't do that. What you should do instead is provide a separate js file (or within your html, we don't really care) that will include all necessary class overrides/extensions.

This way you will be able to EASILY upgrade ExtJS library and provide same overrides if still needed on the new version.

26 Dec 2010, 9:43 PM
@ Ijaeren

thanks buddy, it was a great job. I implemented the same code according to your post and it worked.
Keep it up.