Field help text plugin.

[Animal]

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:

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]

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]

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]

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]

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]

Hi,

Is not the same effect that??:

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

Greetings,

[jay@moduscreate.com]

That's for error messages though.

[steffenk]

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]

Done. The CSS has been updated. clear: both was unnecessary.

[steffenk]

superb, thx!