Extjs 4：如何动态更改进度条颜色？答案

【问题标题】：Extjs 4: how to change progressbar colour dynamically?Extjs 4：如何动态更改进度条颜色？
【发布时间】：2012-02-21 15:38:53
【问题描述】：

问题 在下面回答

您好，我正在寻找一种简单的方法来更改进度条的颜色，我想用它来做些什么，看起来像这样：

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

然后通过样式使用progressbar已经有的方法，setUI或其他可以工作的方式来改变颜色的方式也会很棒。

谢谢。

解决方案

我找到了方法，在这里，我创建了一个自定义进度条，我在其中使用监听器更新，然后这个将接收进度条的实际值，而进度条本身，我获取 obj 并找到进度条的样式，在这里我用我想要的十六进制颜色修改 backgroundColor 和 borderRightColor 并将 backgroundImage 设置为空 URL，然后它将允许 backgroundcolor 显示。

我还创建了发送默认颜色的选项。

代码如下：

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

任何建议都会收到，谢谢:)。

【问题讨论】：

标签： extjs colors progress-bar extjs4

【解决方案1】：

我建议添加一个在 move 事件上调用您的函数的侦听器，因为这似乎包含您需要的位置。 Documentation link。

对于 setColor 方面，我相信您想设置组件 style 元素。 Documentation link。希望对您有所帮助。

【讨论】：