Вопрос Ответ ниже
Здравствуйте, я ищу простой способ изменить цвет индикатора выполнения, то, что я пытаюсь с ним сделать, будет выглядеть так:
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-адрес, тогда это позволит отображать фоновый цвет.
Также я создаю возможность отправки цвета по умолчанию.
Вот код:
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"
});
Любое предложение будет получено, спасибо :).