Field help text plugin.

[jmariani]

Thank you very much for your prompt response. I'll give it a try and report back.

[demon222]

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]

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]

You got the latest code which aligns the list with the input el rather than the wrap el?

[vot]

> 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.

[Animal]

You need to look at your source for ComboBox.js, and add an override based on http://www.extjs.com/forum/showthrea...489#post377489

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

[vot]

You need to look at your source for ComboBox.js, and add an override based on http://www.extjs.com/forum/showthrea...489#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]

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]

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]

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,