View Full Version : Adding listener to Panel title icon to provide help for panel

14 Dec 2010, 4:10 PM
I'm trying to add a help popup or overlay to each panel in my viewport. I want to click on an icon next to the panel title and have it open a window with help about the panel.

I can see how to add an icon to the title, but is there any way to make the icon clickable (add a listener)? I tried creating html with a clickable image, but I can't integrate this with the rest of the app very well. I'd like to pop open a window relative to the panel's position, but I'm having trouble with that using html for the title. Either the image click doesn't know about the onHelp function or the onHelp function doesn't know about the panel. Maybe there's a better way to do this.

var critprecautionPanel = new Ext.Panel({
collapsible: false,
layout: 'fit',
title: '<img height:"15px" width="15px" id=\'helpCritical\' onClick="onHelp(\'helpCritical\');event.cancelBubble=true;" src="' +getWebAssetFileLocation(jsonInfo['PT_SUMMARY_INFO']['DOMAIN_NAME']) +'img/helpicon.png"/> Critical Precautions',
title: 'Critical Precautions',
//iconCls: 'my-help',
items: critprecaution_listView,
handler: onHelp,

var onHelp = function(el){
alert ('help');
var win = new Ext.Window({
title: 'helpCritical',
height: 50,
width: 160,
resizable: false,
closeAction: "hide",
x: 1,
y: 1,
layout: "fit",

contentEl: el

15 Dec 2010, 8:44 AM
I figured out how to add a listener to the whole header of a panel, but how do I tell if the user clicked specifically. on the icon. Let's say I want to call the function panelHeaderClick when the user clicks on just the icon, not the whole title.

title: 'Documents',
iconCls: 'my-help',

listeners: {
'render': {
fn: function(){
this.header.on('click', function(){
if (Ext.getCmp(panel)) {
options: {
single: true

15 Dec 2010, 9:33 AM
I need to be able to distinguish between clicking on the icon in the background and clicking on any other part of the title

I tried looking at the x,y values in the event, but so far they are all dependent resizing
var panelHeaderClick = function(thePanel,theEvent){
alert(theEvent.currentTarget.clientLeft + " "+ theEvent.currentTarget.clientTop);
alert(theEvent.x + " "+ theEvent.y);


15 Dec 2010, 9:49 AM
I noticed that Panel and GridPanel render the title differently. My CSS for iconCls targets these 2 differently
For the Panel, I target img.my-help and for GridPanel I target div.my-help.


grid panel render title

<div class="x-panel-header x-unselectable x-panel-icon my-help" id="ext-gen379" style="-webkit-user-select: none; ">
<span class="x-panel-header-text" id="ext-gen396">Documents</span>

panel render title

<div class="x-panel-header x-unselectable" id="ext-gen114" style="-webkit-user-select: none; ">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="x-panel-inline-icon my-help">
<span class="x-panel-header-text" id="ext-gen117">Critical Precautions</span>

15 Dec 2010, 10:22 AM
As an alternative for a 'help' icon on your panel, check out the tools attribute in the API docs:

var p = new Ext.Panel({
title: 'Panel with Help Icon',
height: 200,
width: 400,
renderTo: 'contentDiv',
tools: [{
qtip: "<b>RIPLEY:</b> You never said anything about an android being here! " +
"Why not?<br/><b>BURKE:</b> Well, it didn't occur to me. It's been policy for " +
"years to have a synthetic on board.",
handler: function(event, toolEl, panel) {
// do something here if you want...

The user can float over the icon for abbreviated Help text, then if they click the icon, you could display more in-depth help.

15 Dec 2010, 10:52 AM
That's what I was looking for!