Conditional textfield formatting

[pmarsilio]

Hi,
I need to change color or class for a textfield element depending of its value:

{ xtype:'textfield',
label : 'Status:',
name : 'Status',
}

Status can be Green, Yellow or Red and I need to change the color accordantly with the value.

I try to use: (with different events)


InputCls: ‘status_color’ + this.value


But it seems that the InputCls attribute cannot be change dynamically.

How can that be done?

Thanks

[pmarsilio]

frienly bump

[pmarsilio]

Anyone???

[edspencer]

You'd need to listen to the textfield's change event to achieve this, something like:



{
xtype: 'textfield',
label: 'Status',
name: 'Status',
listeners: {
change: function(textfield, newValue, oldValue) {
var el = textfield.getEl();

el.removeCls('status_color_' + oldValue);
el.addCls('status_color_' + newValue);
}
}
}


This will just blindly remove the old CSS class and add a new one (for example if the old textfield value was 'something' and the new one is 'green', it will try to remove 'status_color_something' and add 'status_color_green' to the textfield element.

[pmarsilio]

Hi Thanks for help.

I tried the code you propose but the textfield.getEl() was addressing the outer component and I needed the <input> part.

I change the code for this:


listeners: {
change: function(textfield, newValue, oldValue) {
var el = textfield.getEl().last().first();

el.removeCls('Status_field_' + oldValue);
el.addCls('Status_field_' + newValue);

}
}

With textfield.getEl().last().first(); I am getting the right element.

However there is a problem with the event.

"change" fires when a user manually change the value and then blurs the control.

In my case I need to fire the event when the textfield change its value due to a model load in the form.
I have tried different events but no able to find the right one.

[edspencer]

There's been some debate around whether or not the initial load of a form field should fire the change event. What I would do is extract the code above into a shared helper function and then call it once on load and attach it as an event handler for the change event