PDA

View Full Version : Problem with changeing the fieldLabel at render time



pavanextjs
25 Mar 2010, 11:38 AM
Hi,

I am trying to add '*' to the 'fieldLabel' of some fields for which allowBlank: 'false'. I am doing it in 'afterRender' override of the field. I can not directly append '*' to the fieldLabels as these fieldlabel values might change based on some criteria.


Ext.override(Ext.form.Field, {
afterRender: function(){
if(this.allowBlank == false){ //add '*' for the label
if (this.rendered) {
var labelSeparator = this.labelSeparator;
if (typeof labelSeparator == 'undefined') {
if (this.ownerCt && this.ownerCt.layout &&
typeof this.ownerCt.layout.labelSeparator != 'undefined') {
labelSeparator = this.ownerCt.layout.labelSeparator;
} else {
labelSeparator = '';
}
}
var formItem = this.el.up('.x-form-item', 10);
if (formItem) {
var label = formItem.child('.x-form-item-label');
if (label)
label.update(this.fieldLabel + '<span style=\"color:red;\"> *</span>' + labelSeparator);
}
} else {
// nothing for now :)
}
}
//call the parent
Ext.form.Field.superclass.afterRender.call(this);
}

});This works fine and i am able to the * for those fields.

But after this override, the red dotted line that comes for empty mandatory fields is not there anymore.

Can someone help me in this please?

Thanks in advance.

pavanextjs
25 Mar 2010, 12:07 PM
I figured out the issue. The below code seems to be fixed the issue described above.



Ext.override(Ext.form.Field, {
//check for allowBlank once the field is rendered
afterRender: Ext.form.Field.prototype.afterRender.createInterceptor(function(){
if(this.allowBlank == false){ //append '*' for the required field
if (this.rendered) {
var labelSeparator = this.labelSeparator;

if (typeof labelSeparator == 'undefined') {
if (this.ownerCt && this.ownerCt.layout &&
typeof this.ownerCt.layout.labelSeparator != 'undefined') {
labelSeparator = this.ownerCt.layout.labelSeparator;
} else {
labelSeparator = '';
}
}
var formItem = this.el.up('.x-form-item', 10);
if (formItem) {
var label = formItem.child('.x-form-item-label');
if (label)
label.update(this.fieldLabel + '<span style=\"color:red;\"> *</span>' + labelSeparator);
}
} else {
// nothing for now :)
}
}
//return true so that prototype's afterRender will always be called.
return true;
})
});