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!

1 comment:

  1. Thank you very much for this article, it is so rare to see nowadays written as fervently article. I enjoyed reading it and I learned a lot of things. I will go and continue reading your blog =). Good luck for the future and another one for the quality of it.You can also check out this (http://www.sqiar.com).

    ReplyDelete