Extjs 4: как динамически изменить цвет индикатора выполнения? - PullRequest
Новая
       31

Extjs 4: как динамически изменить цвет индикатора выполнения?

5 голосов
/ 21 февраля 2012

Вопрос Ответ ниже

Здравствуйте, я ищу простой способ изменить цвет индикатора выполнения, что я пытаюсь сделать с ним, выглядело бы так: 

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

Тогда какой-то способ изменить цвет через стиль с помощью метода прогрессбар уже есть, setUI или другой способ, которым он мог бы работать, был бы также хорош.

Спасибо.

Решение

Я нашел способ сделать это, вот он, я создаю пользовательский индикатор выполнения, где я используюобновление слушателя, затем этот получит фактическое значение индикатора выполнения, а сам индикатор, я беру 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"
});

Любое предложение будет получено, спасибо :).

1 Ответ

0 голосов
/ 21 февраля 2012

Я бы предложил добавить прослушиватель, который вызывает вашу функцию для события move, так как он содержит нужные вам позиции. Ссылка на документацию .

Для аспекта setColor я считаю, что вы хотите установить компоненты style. Ссылка на документацию .Надеюсь, это поможет.

...