Field help text plugin.

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

and image help text ;-)

Code:

---

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);
        }
    };

})());

---

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?

Code:

---

    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
        });
    }

---

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

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

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

Quote:

---

Originally Posted by 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

---

Thanks for your help

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

Code:

---

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

---

You can pass helpText as a config option for the field and use Ext.preg if you change the init to this:

PHP Code:

---

    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:

PHP Code:

---

Ext.preg('fieldHelp', Ext.ux.FieldHelp); 


---

Then you can create the field like this:

PHP Code:

---

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


---

or:

PHP Code:

---

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


---

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,

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,