Question

I am trying to set a background color to a textfield when its value is greater than 75. so I added the below code to the listener

listeners: {
       beforeRender: function(e) {
           if (someValue >= 75) {
               e.style = " background-color: #00CC99";
           }
       }
 }

but i get something like below when it renders,

is there a way to make the green color visible in the entire text box instead of just buttom? I figured out that it is not displaying as intended because of the default CSS’s background image. But i want to change the css on change of the value and not write seperate css for just one textbox. Is there a way to do it?

Answer 1

Just get rid of the background image:

e.style = "background-image:none;background-color:#00cc99;";
/* or */
e.style = "background:none #00cc99;";

If e is a DOM object use element.style.property = 'value' instead:

e.style.backgroundImage = 'none';
e.style.backgroundColor = '#00cc99';
/* or */
e.style.background = 'none #00cc99';

For the sake of completeness the definition in ExtJS (according to the ExtJS “Form Field Types” demo):

.x-form-field,.x-form-text{
    /* ... */
    background:url("../../resources/themes/images/default/form/text-bg.gif") 
         repeat-x scroll 0pt 0pt white;
}