Question

Question Answer below

Hello I’m looking a simple way to change the colour of a progress bar, what I’m trying to do with it, would 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 some kind of way to change the colour through the style with the method progressbar already have, setUI, or other kind of way that it could work would be great as well.

Thanks.

Solution

I found the way to do it, here it is, I create a custom progress bar, where I use the listener update, then this one is going to receive the actual value of the progress bar, and the bar itself, I take the obj and find the styles of the progress bar, where I modify backgroundColor and the borderRightColor with the hex color I want and set the backgroundImage to and empty URL then it will allow the backgroundcolor to show up.

Also I create the option to send a default color.

Here is the code:

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

Then if you are going to create a new progressbar with the color changes here is the code:

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

or just with a default color:

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

Any suggestion would be received, thanks :).

Answer 1

I would suggest adding a listener that calls your function on the move event as this appears to contain the positions you need. Documentation link.

For the setColor aspect I believe you want to set the components style elements. Documentation link. Hope that helps.