GXT - How to change the background color of a TextField

To change "programmatically"  the background color for a TextField control from GXT (Ext GWT) you can do it either by setting directly the "background-color" CSS attribute or by assigning a new CSS class.

We have used the "safe call" function safeFunctionCallOn, explained in a previous posting, to avoid pitfalls of rendered vs non-rendered control, which may have or not created the DOM element.

Here's the static helper functions  to do this:

 /* Sets a style attribute for the  text-field control */
public static void setTextFieldAttr(final Field<?> textField, final String cssAttrNm, final String attrVal) {
safeFunctionCallOn(textField, new Function() {
@Override
public void execute() {
textField.el().firstChild().setStyleAttribute(cssAttrNm, attrVal);
}
});
}


 /* Assigns a new CSS style class to the field control  */
public static void setTextFieldStyle(final Field<?> textField, final String cssStyleNm) {
safeFunctionCallOn(textField, new Function() {
@Override
public void execute() {
textField.el().firstChild().setStyleName(cssStyleNm);
}
});
}

And with this we can set by program any appearance of the text-field or other fields (combos, passwords, numbers), like in the following examples:

   TextField textField = ...

   setTextFieldAttr(textField, "font-size", "11px");

   setTextFieldAttr(textField, "background-color", "#e6e6e6");

   setTextFieldStyle(textField, "gwt-x-small-red"); // where gwt-x-small-red is defined in .CSS file 

   

Cheers!