PDA

View Full Version : Ext.ux.plugins.HelpIcon



hAmpzter
5 Sep 2008, 12:56 AM
A plugin to show an icon with help to the right of a form field. (See attached picture)

Requirements:
Ext Js v2.2 (only tested version)
QuickTips are initialized ( Ext.QuickTips.init() ) - Note: If you don't initialize you will only get icon, not the tooltip text



// create namespace for plugins
Ext.ns('Ext.ux.plugins');

/**
* Ext.ux.plugins.HelpIcon plugin for Ext.form.Field
*
* @author Jonas Skoogh
* @date September 4, 2008
*
* @class Ext.ux.plugins.HelpIcon
* @extends Ext.util.Observable
*
* An plugin for all kind of form fields.
*
* NOTE: Don't use anchor:'100%', use anchor:-20 (or -40 if msgTarget:'side' is used)
*/

/**
*
* @class Ext.ux.plugins.HelpIcon
* @extends Ext.util.Observable
*/
Ext.ux.plugins.HelpIcon = Ext.extend(Ext.util.Observable, {
/**
* Init of plugin
* @param {Ext.Component} field
*/
init:function(field) {
Ext.apply(field, {
onRender:field.onRender.createSequence(function(ct, position) {
//If field has the fieldLabel object, add the helpIcon
if(this.fieldLabel && this.helpText) {
var label = this.el.findParent('.x-form-element', 5, true) || this.el.findParent('.x-form-field-wrap', 5, true);

this.helpIcon = label.createChild({
cls:(this.helpIconCls || 'ux-helpicon-icon')
, style:'width:16px; height:18px; position:absolute; left:0; top:0; display:block; background:transparent no-repeat scroll 0 2px;'
});

this.alignHelpIcon = function(){
var el = this.wrap ? this.wrap : this.el;
this.helpIcon.alignTo(el, 'tl-tr', [2, 0]);
}
//Redefine alignErrorIcon to move the errorIcon (if it exist) to the right of helpIcon
if(this.alignErrorIcon) {
this.alignErrorIcon = function() {
this.errorIcon.alignTo(this.helpIcon, 'tl-tr', [2, 0]);
}
}

this.on('resize', this.alignHelpIcon, this);

//Register QuickTip for icon
Ext.QuickTips.register({
target:this.helpIcon
, title:(this.helpTitle || '')
, text:(this.helpText || 'No help defined yet!')
, enabled:true
});
}
}) //end of onRender
}); //end of Ext.apply
} // end of function init
}); // end of extend

// end of file
Example image-class:


.ux-helpicon-icon {
background-image:url(help.png) ! important;
cursor: help;
}
Known bugs:
- Forms without anchor-layout
- Radiobutton-anchor position

NOTE: Example uses FamFamFam Silk icon (http://www.famfamfam.com/lab/icons/silk/)

galdaka
5 Sep 2008, 4:38 AM
Hi,

excellent!! Any example of usage. I can

hAmpzter
5 Sep 2008, 5:51 AM
Hey!

If you have defined the css you should only need to do this:


var form = new Ext.form.FormPanel({
items:[{
xtype:'textfield',
name:'test',
helpText:'Test',
plugins:new Ext.ux.plugins.HelpIcon()
}]
});

denkoo
5 Sep 2008, 8:20 PM
Simple but very amazing plugin :)

thank a lot for sharing

mjlecomte
6 Sep 2008, 3:58 AM
If you post this in the UX Repository you can also post a live example.

hAmpzter
6 Sep 2008, 10:07 AM
If you post this in the UX Repository you can also post a live example.
Yeah, I know.. I already have an account there.. But have not yet posted it there! I will though!

mask_hot
13 Oct 2008, 2:32 AM
Hello, I try to use it on radios without success.

Is it possible to use it with this kind of control?

thx

garraS
13 Oct 2008, 6:55 AM
I add the help cursor in the css class.


.ux-helpicon-icon {
background-image:url(help.png) ! important;
cursor: help;
}

hAmpzter
15 Oct 2008, 10:04 PM
Hello, I try to use it on radios without success.

Is it possible to use it with this kind of control?

thx

Hey!

Could you please post some code on how you define your formpanel and radio-items?

You have to do "Ext.QuickTips.init();" before you load the FormPanel.

I got it working with an radio-button and radio-group.. The only thing I found was that with radio-button the anchor-placement isn't totaly correct..

Regards,
</Jonas>

hAmpzter
15 Oct 2008, 10:04 PM
I add the help cursor in the css class.


.ux-helpicon-icon {
background-image:url(help.png) ! important;
cursor: help;
}

Nice tip! Thanx! :)

Mark
17 Oct 2008, 2:13 AM
Hi,
first of all thank you very much for this nice tool. But I have some problems with the position of the Helpicon in a fieldset where I'm using comboxes. I'm pretty sure it depends on the labelstyle, because without there is no problem. Btw, I noticed this strange bavior only in FF , with IE everything is fine.



,{ columnWidth:1.0
,bodyStyle: 'padding-left:5px;'
,items: [
new Ext.form.FieldSet({
title: 'Zahlungsursprung'
,autoHeight: true
,anchor:'25%'
,labelStyle:'color:#23518D;width:75px;padding-left:1em'
,style:'background-color:#EBF1FA'
,defaultType: 'combo'
,items: [{
name : 'KATEGORIE'
,hiddenName :'VALUE_KATEGORIE'
,id :'field_konto_ein'
,fieldLabel :'Kategorie'
,displayField :'kategorie'
,valueField :'kid'
,width : 130
,store : new Ext.data.SimpleStore({
fields:['kid', 'kategorie']
,data:Ext.bh.combo_kategorie
})
,triggerAction:'all'
,mode:'local'
,selectOnFocus :true
,typeAhead : true
,helpTitle:'Feld: Kategorie'
,helpText:'test'
,plugins:new Ext.ux.plugins.HelpIcon()

},
...Http://sandbox.zentranet.de/images/forum/HelpIcon.jpg

Any Ideas?

Thanks in advance,
Mark
http://sandbox.zentranet.de/images/forum/HeplIcon.jpg

hAmpzter
17 Oct 2008, 3:42 AM
Hey Mark.. There is problems with the HelpIcon when used with "non anchor"-layouts.. I'll see if I can get the time to fix it this weekend..

Regards,
</Jonas>

Mark
17 Oct 2008, 3:48 AM
That would be GREAT!!:D

Mark

crxtech
5 Nov 2008, 11:27 AM
Is there a way to get this to work for textarea fields? It works great on all other fields I've tried so far, but doesn't seem to work on textarea fields at all

Never mind, I figured it out. Even if you have the label set to hidden, you still have to set the label text, or it doesn't show the help icon.

crxtech
6 Nov 2008, 11:28 AM
That would be GREAT!!:D

Mark

I had the same problem and found that adding labelWidth to the form, corrected it...

jay@moduscreate.com
6 Nov 2008, 1:25 PM
instead of requiring quicktips to be initialized, why not initialize it in your coe?

hAmpzter
7 Nov 2008, 12:04 AM
instead of requiring quicktips to be initialized, why not initialize it in your coe?

You mean to add the "Ext.QuickTips.init();" in the plugin?

asagala
24 Jan 2011, 10:43 AM
I anyone needs more elaborate tooltips you can always swith out the


Ext.QuickTips.register({
target:this.helpIcon
, title:(this.helpTitle || '')
, text:(this.helpText || 'No help defined yet!')
, enabled:true
});

and replace it with a Tooltip implementation


var tooltip = new Ext.ToolTip({
target: this.helpIcon,
anchor: 'left',
html:(this.helpText || 'No help defined yet!')
});

asagala
1 Mar 2011, 4:45 PM
Also to get this to work with checkboxex using boxLabel instead of fieldLabel change line 32 from


if (this.fieldLabel && this.helpText){
...}

to

if((this.fieldLabel || this.boxLabel) && this.helpText){
...
}