PDA

View Full Version : Display an icon right of a form element



Urkman
22 Jul 2012, 7:47 AM
Hello,

I would like to display an icon right of a form element to show informations of the field in a tooltip.
What is the best way to do this?

This should look like a field looks like, when an error occur and the field is marked...

Thanks,
Urkman

sword-it
22 Jul 2012, 11:39 PM
Hi Urkman,

I would suggest to use a method like how Ext has and call it in onRender process. Let's take a look at how Ext.form.Field shows error icons "side positioned".

We need to set msgTarget: "side" to show error icons on marking invalid. Here is the source code:



'side' : {
mark: function(field, msg){
field.el.addClass(field.invalidClass);
if(!field.errorIcon){
var elp = field.getErrorCt();
// field has no container el
if(!elp){
field.el.dom.title = msg;
return;
}
field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
if (field.ownerCt) {
field.ownerCt.on('afterlayout', field.alignErrorIcon, field);
field.ownerCt.on('expand', field.alignErrorIcon, field);
}
field.on('resize', field.alignErrorIcon, field);
field.on('destroy', function(){
Ext.destroy(this.errorIcon);
}, field);
}
field.alignErrorIcon();
field.errorIcon.dom.qtip = msg;
field.errorIcon.dom.qclass = 'x-form-invalid-tip';
field.errorIcon.show();
},
clear: function(field){
field.el.removeClass(field.invalidClass);
if(field.errorIcon){
field.errorIcon.dom.qtip = '';
field.errorIcon.hide();
}else{
field.el.dom.title = '';
}
}
}


Let's modify it to call it onRender process:



addInfoIcon: function(msg){
if(!this.infoIcon){
var elp = this.getErrorCt();
// field has no container el
if(!elp){
this.el.dom.title = msg;
return;
}
this.infoIcon = elp.createChild({cls:'your-field-icon-cls'});
if (this.ownerCt) {
this.ownerCt.on('afterlayout', this.alignErrorIcon, this);
this.ownerCt.on('expand', this.alignErrorIcon, this);
}
this.on('resize', this.alignErrorIcon, this);
this.on('destroy', function(){
Ext.destroy(this.infoIcon);
}, this);
}
this.alignErrorIcon();
this.infoIcon.dom.qtip = msg;
this.infoIcon.dom.qclass = 'your-field-tip-cls';
this.infoIcon.show();
},
clearInfoIcon: function(){
if(this.infoIcon){
this.infoIcon.dom.qtip = '';
this.infoIcon.hide();
}else{
this.el.dom.title = '';
}
}
},
alignInfoIcon: function(){
this.infoIcon.alignTo(this.el, 'tl-tr', [2, 0]);
}




onRender: function(){
MyClass.superclass.onRender.apply(this, arguments);
this.addInfoIcon(this.infoText || "You need to enter value into this");
}


Hope these would help.
Regards.