PDA

View Full Version : QuickTips for radiogroup,checkboxgroup, complete textfield



frif
16 Sep 2009, 1:37 PM
What I don't understand: When I register the containing div for a checkboxgroup or radiogroup with QuickTips it doesn't quite work. It is dificult to trigger the tooltip, apparently only gets triggered in a small area between the label and the checkboxes/radio buttons/text field.

With Ext.Tooltip however, it works better, the whole area (label + inputs) triggers the tooltip. This is what I do (I got the target element name with bugzilla):


new Ext.ToolTip({
target:"x-form-el-ext-comp-1026", showDelay : 0, hideDelay : 0,
html : "Print the details of the business now being viewed"
});

Ext.QuickTips.register({
target: 'x-form-el-ext-comp-1026',
title: 'My Tooltip',
text: 'This tooltip was added in code',
width: 100,
dismissDelay: 2000
});Can I make it work with QuickTips?

What I want to achieve: I'd like to be able to specify tooltips in the configuration objects for any Field derived class. The common wisdom seems to override Ext.form.Field afterRender method:

http://extjs.net/forum/showthread.php?t=51650
http://www.extjs.com/forum/archive/index.php/t-51650.html
http://www.extjs.com/forum/showthread.php?t=36642

However, it doesn't quite work since:


the tooltip doesn't show on the label (*) only on the input field for textfields, combos, etc...
for things like radiogroups and checkboxgroups it doesn't even work at all. (**)


I guess that the matter is with this.getEl(). I guess that I could work my way up the DOM hierarchy with this.getEl().up( .... )

Still, that wouldn't solve my problem since, as I stated above, I can't make QuickTips work.

Should I really create one instance of Ext.Tooltip for each field with tooltip instead?

Any help would be appreciated. Thanks
frif

(*) I think that improves the usability to get the tooltip on the bigger area
(**) Above links suggest workarounds for displaying individual tooltips for each radio button/check box, but I'd rather have one easy to access tooltip for the whole area.

frif
17 Sep 2009, 3:11 AM
update:

I've found two promising approaches:


In this thread the QuickTips solution by danh2000 (http://www.extjs.com/forum/member.php?u=4373) almost works, in only fails in checkboxgroups and radiogroups. Should be possible to fix it though: http://www.extjs.com/forum/showthread.php?t=11537
In this other thread the Tooltip solution suggested by Animal (http://www.extjs.com/forum/member.php?u=10) looks very promising. I still don't know how to apply the same concept to form Fields instead of grid rows as in his example: http://www.extjs.com/forum/showthread.php?t=55690

ByteLess
30 Nov 2009, 11:55 AM
Did you ever find how did you apply this to form fields?

frif
30 Nov 2009, 1:02 PM
Yes I did. I mixed and extended a few partial solutions that I had found in the forums and created a new class TipFormPanel. It feels a bit hackish but does what I need. Here is the code, sorry for not properly indenting and coloring it but the instructions in the posting FAQ don't quite work for me.

You can use TipFormPanel like a regular FormPanel, just add a the property qtipText in the config object.



var findLabel = function(field) {

var wrapDiv = null;
var label = null;
//find form-element and label?
wrapDiv = field.getEl().up('div.x-form-element');
if(wrapDiv)
{
label = wrapDiv.child('label');
}
if(label) {
//console.log('label element: ' + label.id );
return label;
}

//find form-item and label
wrapDiv = field.getEl().up('div.x-form-item');
if(wrapDiv)
{
label = wrapDiv.child('label');
}
if(label) {
//console.log('label item: ' + label.id );
return label;
}
//console.log('no label');
return undefined;
};

Ext.TipFormPanel = Ext.extend( Ext.FormPanel, {
onLayout: function(){
Ext.TipFormPanel.superclass.onLayout.call(this);

// add question mark icon to the fields that have tooltip
//
// I have to do it here, onLayout, because the elements are not yet created
// when onRender is fired

var labels = this.getForm().getEl().select('label');

labels.each(
function(label) {
if( label.dom.textContent === "" ) {
// skip hidden label of a combo/checkbox
return;
}
var cmp = Ext.getCmp( label.getAttribute("for") );
//console.log( "for:" + label.getAttribute("for") );
if( cmp.qtipText && !cmp.qtipRendered ) {
var helpImage = label.createChild({
tag: 'img',
src: 'ext/resources/images/default/window/icon-question.gif',
style: 'margin-bottom: 0px; margin-left: 5px; padding: 0px;',
width: 11,
height: 10
});
};
cmp.qtipRendered = 1;
}
);

},
onRender: function( ct, position ) {
Ext.TipFormPanel.superclass.onRender.call(this, ct, position );

// this comes from an example in the API documentation of ext 3.0
// for the delegate attribute of ToolTip
// Also inspired by Animal's post
// http://www.extjs.com/forum/showthread.php?t=57571
// but I had to change x-form-wrap to x-form-element


ct.tip = new Ext.ToolTip({
target: this.getForm().getEl(),
delegate: '.x-form-element', // Each form field causes its own seperate show and hide.
trackMouse: true, // Moving within the field should not hide the tip.
renderTo: document.body, // Render immediately so that tip.body can be
// referenced prior to the first show.
listeners: { // Change content dynamically depending on which element
// triggered the show.

beforeshow: function updateTipBody(tip) {
var domId = tip.triggerElement.id;
var cmpId = "ext-comp-" + domId.substr( domId.length -4, 4 );

var component = Ext.getCmp(cmpId);
var text = component.qtipText;

if( !text ) {
var group = component.findParentByType('checkboxgroup') || component.findParentByType('radiogroup');

if( group ) {
text = group.qtipText;
}
}
if( text ) {
//tip.body.dom.innerHTML = 'Over form Element ID ' + cmpId + " - " + text ;
tip.body.dom.innerHTML = text ;
return true;
}else {
// hide tooltip for the elements that don't have
return false;
//tip.body.dom.innerHTML = 'Over form Element ID ' + cmpId ; // DEBUG
}

//console.log(tip.triggerElement);
}
} // listeners
}); // tooltip

} // onRender function
} // extend config object
); // extend to TipFormPanel


// It's necessary to register the component so that it has an xtype = tipform
Ext.reg('tipform', Ext.TipFormPanel);

frif
30 Nov 2009, 1:06 PM
BTW, you should be able to specify a tooltip either for the whole field or for each individual item, and get the question mark icon on the proper place