2012-02-21 27 views
5

Estoy tratando de establecer un color de fondo a un campo de texto cuando su valor es mayor que 75. por lo que añadió el siguiente código para el oyenteAjuste color de fondo en Extjs Textfield

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

pero me da algo así como más adelante cuando se hace,

enter image description here

es que hay una manera de hacer que el color verde visible en el cuadro de texto completo en lugar de sólo buttom? Me di cuenta de que no se muestra como estaba previsto debido a la imagen de fondo del CSS predeterminado. Pero quiero cambiar el CSS en el cambio del valor y no escribir CSS separados para un solo cuadro de texto. ¿Hay una manera de hacerlo?

Respuesta

6

Sólo deshacerse de la imagen de fondo:

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

Si e es un objeto de uso DOM element.style.property = 'value' lugar:

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

En aras de la exhaustividad de la definición en ExtJS (según el 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; 
} 
+0

Así que puse un oyente en el cuadro, cuando el valor cambia simplemente obtengo la referencia del elemento a través de la función de cambio y trato de establecer la propiedad de estilo tal como lo describió, pero parece que no funciona. ¿Hay algún otro método que pueda usar para establecer los nuevos valores de estilo? –

+0

Puede proporcionar un [ejemplo en línea de trabajo] (http://sscce.org/) de su problema e incluirlo en su pregunta;). Use http://jsfiddle.net/ por ejemplo. – Zeta

+2

Lo tengo, estaba usando e.style para establecer los valores que no funcionan, así que usé firebug para ver qué tiene este elemento, resulta que hay un método llamado setStyle en el objeto "e" de "e" . Así que lo cambié a e.el.setStyle ("background-image", "none"); e.el.setStyle ("color de fondo", "# 00cc99"); que funciona a la perfección Gracias –