PDA

View Full Version : Field help text plugin.



Animal
18 Aug 2009, 11:40 AM
A very simple plugin inspired by http://extjs.com/forum/showthread.php?t=33162

It appends a help message above or below a Field.

eg:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/helptext.jpg



Ext.ux.FieldHelp = Ext.extend(Object, (function(){
function syncInputSize(w, h) {
this.el.setSize(w, h);
}

function afterFieldRender() {
if (!this.wrap) {
this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
this.positionEl = this.resizeEl = this.wrap;
this.actionMode = 'wrap';
this.onResize = this.onResize.createSequence(syncInputSize);
}
this.wrap[this.helpAlign == 'top' ? 'insertFirst' : 'createChild']({
cls: 'x-form-helptext',
html: this.helpText
});
}

return {
constructor: function(t, align) {
this.helpText = t;
this.align = align;
},

init: function(f) {
f.helpAlign = this.align;
f.helpText = this.helpText;
f.afterRender = f.afterRender.createSequence(afterFieldRender);
}
};
})());


CSS:


.x-form-helptext {
font-size: 9px;
color: #888;
}

MH61
19 Aug 2009, 5:08 AM
How do i apply this to a text box, do i have to create a FieldHelp object and then add it to my textfield, or is there a property i can set on my textfield (i tried both fieldHelp and helptext as properties)

Animal
19 Aug 2009, 5:52 AM
It's a plugin. You use it in the standard way plugins are used: In the plugins config.



plugins: [ new Ext.ux.FieldHelp('Some help text') ],

MH61
19 Aug 2009, 6:31 AM
Thanks, I guess i don't know the difference between an extension and a plugin.
It looks nice - just what I was looking for

jay@moduscreate.com
20 Aug 2009, 4:21 AM
Nige!! this should be in the framework. :)

MH61, an "extension" extends an Ext JS class.

a "Plugin" generally extends Object (or observable in some cases) and is utilized by an Ext JS class. I'm going to be adding a chapter dedicated to extensions and plugins in Ext JS in Action :)

galdaka
20 Aug 2009, 4:37 AM
Hi,

Is not the same effect that??:


Ext.form.Field.prototype.msgTarget = 'under';

Greetings,

jay@moduscreate.com
20 Aug 2009, 4:39 AM
That's for error messages though.

steffenk
21 Aug 2009, 10:21 AM
Hi Animal,

that's a great addition (imho should be in core)

What's about add a property "position" that let render the help text on top or bottom of the field?
From semantic i would like to have it before the field, visual looks nicer after because of Alignement.

Animal
21 Aug 2009, 10:46 PM
Done. The CSS has been updated. clear: both was unnecessary.

steffenk
22 Aug 2009, 2:58 AM
superb, thx!

Condor
22 Aug 2009, 3:38 AM
Two problems with this plugin:

1. For non-wrapped components positioning, resizing and hiding will work incorrectly.
It needs:

if (!this.wrap) {
this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
this.positionEl = this.resizeEl = this.wrap;
this.actionMode = 'wrap';
}

2. For wrapped components, putting another component inside the wrap can have unwanted side-effects:
- The ComboBox dropdown is positioned BELOW the helpText.
- The helpText below a HtmlEditor is displayed INSIDE the border.

Animal
22 Aug 2009, 3:46 AM
Well spotted. I will update.

Animal
22 Aug 2009, 3:51 AM
Is there a good reason why ComboBox has



this.list.alignTo(this.wrap, this.listAlign);


instead of



this.list.alignTo(this.el, this.listAlign);

?

Animal
22 Aug 2009, 3:55 AM
Because I just added overrides to align to the el to my demo of this plugin, and it aligned as expected.

Condor
22 Aug 2009, 3:56 AM
Funny... I created the same plugin for my company about a year ago and I also ended up patching Combobox list align.

jnadler
30 Nov 2009, 10:38 AM
This plugin is great, thanks Animal. I'm noticing one problem: on fields which have *both* anchor and this plugin, the anchor is not taking effect.

The x-form-field-wrap DIV has the correct width as set by the anchor.

The width did not get applied to the input box (it does when the plugin is removed).

So somehow this is defeating AnchorLayout. Anybody have a suggestion for where I might look next?

Note: Ext 3.0.3

Animal
1 Dec 2009, 2:34 AM
OK, I updated post 1.

If it wraps the input, and changes the resizeEl to be the wrapper, it has to sync the size of the input field whenever it gets resized.

jnadler
1 Dec 2009, 9:04 AM
Outstanding. Thanks, all is as expected now.

jmariani
19 Jan 2010, 4:11 PM
Hi, Animal.

Outstanding plugin!.
I want to add to the left of the text a small "info" icon, but I'm really not CSS proficient. Any chance you can add tis feature or guide me on how to add it?

TIA!

Animal
20 Jan 2010, 12:58 PM
Give your x-form-helptext class a padding-left enough to clear your icon, and a non-repeating background-image of your choice.

jmariani
20 Jan 2010, 2:06 PM
Thank you very much for your prompt response. I'll give it a try and report back.

demon222
21 Jan 2010, 1:30 AM
and image help text ;-)



Ext.ux.FieldHelp = Ext.extend(Object, (function(){

function afterFieldRender() {
if (this.helpText) {
if (this.getEl().up('div.x-form-item')) {
var helpImage = this.getEl().up('div.x-form-item').child('label').createChild({
tag: 'img',
src: '../media/ico/help.png',
style: 'margin-bottom:0px; margin-left:5px; padding:0px;'
});
Ext.QuickTips.register({
target: helpImage,
title: '',
text: this.helpText,
enabled: true
});
}
}
}

return {
constructor: function(t) {
this.helpText = t;
},
init: function(f) {
f.helpText = this.helpText;
f.afterRender = f.afterRender.createSequence(afterFieldRender);
}
};

})());

vot
21 Jan 2010, 1:48 AM
Hello Animal,

thanks for the great plugin. Anyway, i still have a display problem with comboboxes in ExtJS 3.0.3. The dropdown list is rendered below the help text (see attached image).

I fixed this using the following code, but i do not like it personally because it is not generic. I assume there is a much more elegant way to do that, but i'm not a HTML/JS specialist. Any tipps?



function afterFieldRender() {
var node = null;
if (this.getXType() == "combo") {
node = this.container;
} else {
if (!this.wrap) {
this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
this.positionEl = this.resizeEl = this.wrap;
this.actionMode = 'wrap';
this.onResize = this.onResize.createSequence(syncInputSize);
}
node = this.wrap;
}
node[this.helpAlign == 'top' ? 'insertFirst' : 'createChild']({
cls: 'x-form-helptext',
html: this.helpText
});
}

Animal
21 Jan 2010, 2:59 AM
You got the latest code which aligns the list with the input el rather than the wrap el?

vot
21 Jan 2010, 3:51 AM
> You got the latest code which aligns the list with the input el rather than the wrap el?
I use the code from your first post (http://www.extjs.com/forum/showthread.php?p=375683#post375683).

Animal
21 Jan 2010, 4:01 AM
You need to look at your source for ComboBox.js, and add an override based on http://www.extjs.com/forum/showthread.php?p=377489#post377489

That fix is applied in SVN and will be available in 3.1.1

vot
21 Jan 2010, 4:08 AM
You need to look at your source for ComboBox.js, and add an override based on http://www.extjs.com/forum/showthread.php?p=377489#post377489

That fix is applied in SVN and will be available in 3.1.1
Thanks for your help

Here a fix for all that people that do not want to wait till the fix is released



Ext.sequence(Ext.form.ComboBox.prototype, "restrictHeight", function() {
this.list.alignTo(this.el, this.listAlign);
});

KRavEN
7 Jul 2010, 6:15 AM
You can pass helpText as a config option for the field and use Ext.preg if you change the init to this:

init : function(f) {
f.helpAlign = this.align;
if ('object' != typeof this.helpText)
f.helpText = this.helpText;
f.afterRender = f.afterRender.createSequence(afterFieldRender);
}
add the Ext.preg at the end of the file:

Ext.preg('fieldHelp', Ext.ux.FieldHelp);
Then you can create the field like this:

new Ext.form.TextField ({
name: 'username',
fieldLabel: 'User Name',
helpText: 'Users Full Name',
plugins: [ 'fieldHelp' ]
});
or:

new Ext.form.TextField ({
name: 'username',
fieldLabel: 'User Name',
plugins: [ new Ext.ux.FieldHelp('Users Full Name') ]
});

nedward
19 Aug 2010, 6:26 PM
Hi Animal,

After I create a combo with the Field Help plugin I can see the help text show below the combo. If I have to change the help text based on the combo selection, how can I get access to the Help Text element. I tried combo.getEl().child('x-form-helptext') and could not get it.

Appreciate your help.

Thanks,

nedward
19 Aug 2010, 6:55 PM
Hi Animal,

With regards to my earlier question, I figured it out. I modified the line in your plugin code as below and getting a reference to the wrapped element (helpText) like:

this.helpEl = this.wrap[this.helpAlign == 'top' ? 'insertFirst' : 'createChild']({
cls: 'x-form-helptext',
html: this.helpText
});

and I am accessing it like p_combo.helpEl.update('New text'). Now I am able to change the text. If you consider this a wrong way to do let me know. For now it is working for me.

Thanks,

wemerson.januario
11 Sep 2010, 10:51 AM
nice work

paffinito
29 Sep 2010, 11:54 PM
Hi Animal,

not work with textarea and compositefield.

Thanks for your help

petcy
3 Oct 2010, 9:21 PM
is this possible to change the properties of a textfield on button click event???


here i want to change the hidden property of text field into false on a button click....


how???

Rick.McIntosh
6 Aug 2011, 7:13 PM
Animal:

When I upgraded from EXTJS 3.3.1 to 3.4.0 the text moved from under the form field to the upper right of the form field. Otherwise everything the same. I have used the FieldHelp plugin for several years and no issue with each upgrade. I am not sure what to do, any ideas?

I use the plugin code exactly as written on the first page of this forum with a sample form field as written below:

{ xtype: 'checkbox',
name: 'enable_row_numbers',
plugins: [ new Ext.ux.FieldHelp("ENABLE_ROW_NUMBERS_TOOLTIP'") ],
fieldLabel: "ENABLE_ROW_NUMBERS"
},
Thanks



Rick

talha06
3 Nov 2011, 4:14 AM
useful plugin as expected, thanks for sharing Animal =D>

MtAiryEd
20 Dec 2011, 11:00 AM
VERY useful!! Thanks for creating this!

Rick.McIntosh
20 Sep 2012, 11:59 AM
How do you port this FieldHelp plugin to EXTJS 4.1. I have looked and it still seems that extjs does not support form tooltips.

Thanks

Rick

Rick.McIntosh
29 Sep 2012, 8:13 AM
Ext.ux.FieldHelp = Ext.extend(Object, (function(){
function syncInputSize(w, h) {
this.el.setSize(w, h);
}


function afterFieldRender() {
if (!this.wrap) {
// this.wrap = this.el.wrap({cls: 'x-form-field-wrap'}); // extjs 3.x for from fields that are not tables
this.wrap = this.el.last().last().last(); //change for extjs 4.1 to append at end or form/table field
this.positionEl = this.resizeEl = this.wrap;
this.actionMode = 'wrap';
this.onResize = Ext.Function.createSequence(this.onResize,syncInputSize);
}
this.wrap[this.helpAlign == 'top' ? 'insertFirst' : 'createChild']({
cls: 'x-form-helptext',
html: this.helpText
});
}


return {
constructor: function(t, align) {
this.helpText = t;
this.align = align;
},

init: function(f) {
f.helpAlign = this.align;
f.helpText = this.helpText;
test = f.afterRender;
f.afterRender = Ext.Function.createSequence(f.afterRender,afterFieldRender);
}
};
})());

Rick.McIntosh
29 Sep 2012, 11:48 AM
Ext.ux.FieldHelp = Ext.extend(Object, (function(){
function syncInputSize(w, h) {
this.el.setSize(w, h);
}


function afterFieldRender() {
if (!this.wrap) {
// this.wrap = this.el.wrap({cls: 'x-form-field-wrap'}); // extjs 3.x for from fields that are not tables
// find next to last element and then wrap in text under field
//for example this.wrap = this.el.last().last().last();
var temp_el = new Array();
temp_el[0] = this.el;
i=0;
while(temp_el[i]) //change for extjs 4.1 to append at end or form/table field on next to last element for field type
{
temp_el[i+1] = temp_el[i].last();
i++;
}
var xt = this.getXType().substr(4);
if (xt == 'obox') // combobox
{
this.wrap = temp_el[i-4]; // insert before 3 elements from last for combo type
}
else // textfield, checkbox, etc
{
this.wrap = temp_el[i-2]; // insert before next to last table element for all other types
}
this.positionEl = this.resizeEl = this.wrap;
this.actionMode = 'wrap';
this.onResize = Ext.Function.createSequence(this.onResize,syncInputSize);
}
this.wrap[this.helpAlign == 'top' ? 'insertFirst' : 'createChild']({
cls: 'x-form-helptext',
html: this.helpText
});
}


return {
constructor: function(t, align) {
this.helpText = t;
this.align = align;
},

init: function(f) {
f.helpAlign = this.align;
f.helpText = this.helpText;
test = f.afterRender;
f.afterRender = Ext.Function.createSequence(f.afterRender,afterFieldRender);
}
};
})());