How to render custom display in form field?

[comm]

I can render custom display for a grid cell value using config renderer. And still, original value can be accessed in its original value.
How to do the similar thing in a form field?

[cgoss]

bump

[pragma]

I was just wondering the same thing. I've looked all over the place and there's no hook for this as far as I can tell.

Edit: well, that didn't take long. This isn't exactly advised, but it does the job.



// works in ExtJS 1.0.1a
Ext.form.Field.prototype.setValue = function(v){
this.value = v;
if(this.rendered){
if(this.renderer){
this.el.dom.value = this.renderer(v);
}
else{
this.el.dom.value = v;
}
this.validate();
}
};


Now all you need to do is add a "renderer" config attribute to your form fields, just like you would in the column model. The behavior is the same: it only modifies what you see, leaving the underlying value intact. Intercept that first line instead to get the renderer to modify the underlying value on setValue().

[comm]

I was just wondering the same thing. I've looked all over the place and there's no hook for this as far as I can tell.

Edit: well, that didn't take long. This isn't exactly advised, but it does the job.



// works in ExtJS 1.0.1a
Ext.form.Field.prototype.setValue = function(v){
this.value = v;
if(this.rendered){
if(this.renderer){
this.el.dom.value = this.renderer(v);
}
else{
this.el.dom.value = v;
}
this.validate();
}
};


Now all you need to do is add a "renderer" config attribute to your form fields, just like you would in the column model. The behavior is the same: it only modifies what you see, leaving the underlying value intact. Intercept that first line instead to get the renderer to modify the underlying value on setValue().

Thx Pragma. I'll try the code.
For Jack, can this feature become default feature for TextField?

[cgoss]

This works great! I did add one line to the code:


Ext.form.Field.prototype.setValue = function(v){
this.value = v;
if(this.rendered){
v = (v === null || v === undefined ? '' : v); //added
if(this.renderer){
this.el.dom.value = this.renderer(v);
}
else{
this.el.dom.value = v;
}
this.validate();
}
};

The original Field.setValue function had these null checks in there, so I thought it would be good to follow that pattern.