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,

[Animal]

Give your x-form-helptext class a padding-left enough to clear your icon, and a non-repeating background-image of your choice.

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

})());

[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