Extjs 4: cómo cambiar dinámicamente el color de la barra de progreso?

Question

Preguntarespuesta continuación

Hola estoy buscando una forma sencilla de cambiar el color de una barra de progreso, lo que estoy tratando de hacer con él, se vería así:

function (progressBar, value) { 
    if (value < 40) { 
     progressBar.setColor('red'); 
    } else if (value >= 40 && value <= 80) { 
     progressBar.setColor('yellow'); 
    } else { 
     progressBar.setColor('green'); 
    } 
} 

Entonces, algún tipo de forma de cambiar el color a través del estilo con el método progressbar que ya tiene, setUI u otro tipo de forma en que podría funcionar también sería genial.

Gracias.

Solución

he encontrado la manera de hacerlo, aquí está, creo una barra de progreso personalizada, donde utilizo la actualización oyente, entonces éste va a recibir el valor real de los avances bar, y la barra en sí, tomo el obj y encuentro los estilos de la barra de progreso, donde modifico backgroundColor y borderRightColor con el color hexadecimal que quiero y configuré backgroundImage y vacío URL luego permitirá que se muestre el backgroundcolor .

También creo la opción para enviar un color predeterminado.

Aquí está el código:

Ext.define("progressBarCustom", { 
    extend: 'Ext.ProgressBar', 
    alias: 'widget.progressBarCustom', 
    max: null, 
    ave: null, 
    min: null, 
    color: null, 

    initComponent: function() { 
     var me = this; 
     me.width = 300; 
     me.margin = '5 5 0 5'; 
     me.callParent(arguments); 
    }, 

    listeners: { 
     update: function (obj, val) { 
      if (this.max != null && this.ave != null && this.min != null) { 
       if (val * 100 <= this.min) { 
        obj.getEl().child(".x-progress-bar", true).style.backgroundColor = "#FF0000"; 
        obj.getEl().child(".x-progress-bar", true).style.borderRightColor = "#FF0000"; 
        obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')"; 
       } else if (val * 100 <= this.ave) { 
        obj.getEl().child(".x-progress-bar", true).style.backgroundColor = "#FFFF00"; 
        obj.getEl().child(".x-progress-bar", true).style.borderRightColor = "#FFFF00"; 
        obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')"; 
       } else { 
        obj.getEl().child(".x-progress-bar", true).style.backgroundColor = "#009900"; 
        obj.getEl().child(".x-progress-bar", true).style.borderRightColor = "#009900"; 
        obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')"; 
       } 
      } else if (this.color != null) { 
       obj.getEl().child(".x-progress-bar", true).style.backgroundColor = this.color; 
       obj.getEl().child(".x-progress-bar", true).style.borderRightColor = this.color; 
       obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')"; 
      } 
     } 
    } 
}); 

Entonces, si usted va a crear un nuevo progressbar con los cambios de color aquí está el código:

Ext.create('progressBarCustom', { 
    min : 0.20, 
    ave : 0.60, 
    max : 0.80 
}); 

o simplemente con un color predeterminado:

Ext.create('progressBarCustom', { 
    color : "#4D0099" 
}); 

Cualquier sugerencia sería recibida, gracias :).

Answer 1

Sugeriría agregar un oyente que llame a su función en el evento move ya que parece que contiene las posiciones que necesita. Documentation link.

Para el aspecto setColor, creo que desea establecer los componentes style elementos. Documentation link. Espero que ayude.