Extjs 4: how to dynamically change the color of a progressive version?

Question

Question Answer below

Hello, I'm looking for an easy way to change the color of the progress bar, what I'm trying to do with it will look like this:

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

Then there is already some way to change the color by style using the progressbar method, setUI or another way that it could work will also be wonderful.

Thank.

Decision

, , , , , obj , backgroundColor borderRightColor , , backgroundImage URL-, .

.

:

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('')";
            }
        }
    }
});

, , :

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

:

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

, :).

Answer 1

, move, , , . .

setColor, , style. . , .