View Full Version : Conditional textfield formatting

8 Sep 2011, 7:38 AM
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?


9 Sep 2011, 9:32 AM
frienly bump

13 Sep 2011, 10:37 PM

14 Sep 2011, 12:06 AM
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.

14 Sep 2011, 2:21 AM
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.

14 Sep 2011, 8:43 AM
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