PDA

View Full Version : Using Tools for Help popup



rebeccapeltz
20 Dec 2010, 3:58 PM
I'm using the tools config option to provide a help popup for a bunch of panels on a page. I'd like the help to be clickable (not a mouseover), but I want it to be anchored to the panel that it is providing help on. It looks like the qtip provides the anchoring, but the handler is how you can provide click ability. Is there any way to make the qtip respond to a click rather than a mouseover? Or to make the handler open a window that is relative to the location of the panel that contains the tools handler. You might be able to see that I tried to specify the panel id and then render with an x,y position relative to it, but that didn't work.

Here is my current code:


function helpPopup(panelInfo,renderInfo){
var popup;
if (popup == null){
popup = new Ext.Window({
layout:'fit',
width:300,
height:210,
closeAction:'hide',
plain:true,
/*
renderTo:renderInfo,
x:300,
y:50,
*/
title:'Seattle Childrens MPages Help',
items:new Ext.Panel({
id:panelInfo,
labelWidth: 75,
frame: false,
html:'help info ' + panelInfo
})
})
}
popup.show();
}


var critprecautionPanel = new Ext.Panel({
collapsible: false,
layout: 'fit',
title: 'Critical Precautions',
helpText: 'criticalPrecautions',
tools: [{
id:'help',
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) {
helpPopup(panel.helpText,panel.id);
}
}],

steffenk
20 Dec 2010, 5:23 PM
why don't you use simply a closeable tooltip?

rebeccapeltz
27 Dec 2010, 4:00 PM
I created a panel with a help 'tool' that contains a qtip that refers to a Tooltip that is closable. What I am seeing is that when I mouse over the help tool, I see only the title of the Tooltip. Should I be referencing the tooltip from some other config option than qtip?




var critprecautionPanel = new Ext.Panel({
collapsible: false,
layout: 'fit',
title: 'Critical Precautions',
helpText: 'criticalPrecautions',
tools: [{
id:'help',
collapsible:true,
qtip: new Ext.ToolTip({
html: 'Click the X to close me',
title: 'My Tip Title',
autoHide: false,
closable: true,
draggable:true
})
}],
items: [critprecaution_listView],
hidden:false
});

Condor
28 Dec 2010, 1:13 AM
You can't specify 'qtip' as an Ext.ToolTip instance. Only String and Ext.QuickTips.register config objects are supported, e.g.

qtip: {
title: 'My Tip Title',
text: 'Click the X to close me',
autoHide: false
}
And 'closable' isn't a config option you can use here. It's only possible to enable it for all QuickTips, e.g.

Ext.QuickTip.prototype.closable = true;

rebeccapeltz
28 Dec 2010, 7:32 AM
Thank you for all the help with this. My goal was to provide help information via the panel config 'tools' help item. I can easilty popup a window via the tools handler, but I wanted the window to popup next to the panel that I was providing help for, and the window always pops up in the center of my viewport.
It doesn't look like there's a way to add a tooltip to the help tool that is displayed in the header of the panel. I need more than text to appear in the help that is displayed. The tooltip would provide adequate functionality, but since the qtip doesn't support a tooltip, I may have to abandon this method and stick with popping up a window.

Condor
28 Dec 2010, 7:35 AM
From the tool handler you could use:

win.render(Ext.getBody());
win.alignTo(toolEl, 'tr-br');
win.show();

rebeccapeltz
30 Dec 2010, 8:08 AM
Thanks for all your help with this. Just to share - I created a tools config factory and it seems to be working. HelpDB is an object with data containing the title and text for the help panels accessed via the panelKey. You close the help popup window by clicking anywhere within the help popop window.



Ext.ns('Child');


Child.version ='1.0';





Child.PtsumHelpFactory =function(config){






config.panelKey =(typeof config.panelKey =='undefined')?'': config.panelKey;

config.showLeft =(typeof config.showLeft =='undefined')?false: config.showLeft;







if(config.panelInfo ===''){

return[];//return empty array if input is not sufficient
}


var helpKey = config.panelKey;
var helpTitle = HelpDB[helpKey]["title"];
var helpText = HelpDB[helpKey]["text"];
var showLeft = config.showLeft;
var helpHtml ='<div >';
helpHtml +='<h3 class="help-title">'+ helpTitle +' Help</h3>';






helpHtml +='<p class="help-text">';





helpHtml += helpText;





helpHtml +='</p>';




helpHtml +='</div>';




var handleWinClick =function(){

this.close();
}


var toolsArray =[{
id




:'help',

collapsible:true,





qtip:"Click for help",





handler:function(event, toolEl, panel){






var position = showLeft ?'tr-br':'tl-bl';

var popup =new Ext.Window({
width :400,





bodyCssClass:'help-body',



closeAction:'close',





title:'Seattle Children\'s MPages Help',
html: helpHtml




});

popup.render(Ext.getBody());






popup.alignTo(toolEl, position);





popup.show();





popup.el.on('click',function(){





popup.close();





});

}
}];


return toolsArray;
}




Then you call if from within a panel by adding this to the Panel config


tools: Child.PtsumHelpFactory({panelKey:'critical_precautions_ip',showLeft:false})