helpText for 3.1.+ (with support for Icon and Position)

[Stju]

Plug and Play.


Ext.override(Ext.form.Field, {
onRender : function(ct, position){
if(!this.el){
var cfg = this.getAutoCreate();

if(!cfg.name){
cfg.name = this.name || this.id;
}
if(this.inputType){
cfg.type = this.inputType;
}
this.autoEl = cfg;
}
Ext.form.Field.superclass.onRender.call(this, ct, position);
if(this.submitValue === false){
this.el.dom.removeAttribute('name');
}
var type = this.el.dom.type;
if(type){
if(type == 'password'){
type = 'text';
}
this.el.addClass('x-form-'+type);
}
if(this.readOnly){
this.setReadOnly(true);
}
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}

this.el.addClass([this.fieldClass, this.cls]);

if (this.helpText !== undefined){
this.wrap = this.el.wrap();
this.wrap[this.helpPosition == 'top' ? 'insertFirst' : 'createChild']({
cls: this.iconCls ? 'x-form-helptext-icon '+this.iconCls : 'x-form-helptext' ,
html: this.helpText
});
}
}
});
css file:


.x-form-helptext {
font-size: 9px;
color: #888;
}
.x-form-helptext-icon {
font-size: 9px;
color: #888;
padding-left:10px;
background-repeat:no-repeat;
/*adjust to your icon(8px icon)*/
background-position:0 3px;
}
.ico-help-req{background-image:url(../icons/emblem-important.png)!important}
Sample usage:


{
fieldLabel: 'Nickname',
allowBlank:false,
helpText:'Important! This is must be uniq!',
iconCls:'ico-help-req', //adds icon, [optional]
helpPosition:'top' //places helpText above the field [optional]
}
Sample output and icon in attachment.

Stju

[albeva]

nice idea. but could you implement this as a plugin?

[vot]

Use the search button and you'll find such feature implemented as plugin. Nevertheless, why not sit down and try to implement it yourself, this will be a nice learning session in ExtJS.