Câu hỏitrả lời dưới đâyExtjs 4: làm thế nào để thay đổi màu sắc của thanh tiến trình?
Xin chào Tôi đang tìm một cách đơn giản để thay đổi màu sắc của một thanh tiến trình, những gì tôi đang cố gắng để làm gì với nó, sẽ trông như thế này:
function (progressBar, value) {
if (value < 40) {
progressBar.setColor('red');
} else if (value >= 40 && value <= 80) {
progressBar.setColor('yellow');
} else {
progressBar.setColor('green');
}
}
Sau đó, một số loại cách để thay đổi màu sắc thông qua kiểu với thanh tiến trình của phương thức đã có, setUI hoặc cách khác mà nó có thể hoạt động sẽ rất tuyệt.
Cảm ơn.
Giải pháp
tôi thấy cách để làm điều đó, ở đây nó là, tôi tạo ra một thanh tiến trình tùy chỉnh, nơi tôi dùng bản update của người nghe, sau đó một điều này sẽ nhận được giá trị thực tế của tiến bộ thanh, và thanh chính nó, tôi lấy obj và tìm các phong cách của thanh tiến trình, nơi tôi sửa đổi backgroundColor và borderRightColor với màu hex tôi muốn và đặt backgroundImage thành URL rỗng sau đó nó sẽ cho phép backgroundcolor hiển thị .
Ngoài ra tôi tạo tùy chọn để gửi màu mặc định.
Đây là mã:
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('')";
}
}
}
});
Sau đó, nếu bạn đang đi để tạo ra một progressbar mới với những thay đổi màu sắc ở đây là các mã:
Ext.create('progressBarCustom', {
min : 0.20,
ave : 0.60,
max : 0.80
});
hoặc chỉ với một màu mặc định:
Ext.create('progressBarCustom', {
color : "#4D0099"
});
Mọi đề xuất sẽ được nhận, cảm ơn :).