5
質問Extjs 4：プログレスバーの色を動的に変更する方法は？
以下回答こんにちは、私は次のようになり、私はそれで何をしようとしている、プログレスバーの色を変更するための簡単な方法を探しています：
function (progressBar, value) {
if (value < 40) {
progressBar.setColor('red');
} else if (value >= 40 && value <= 80) {
progressBar.setColor('yellow');
} else {
progressBar.setColor('green');
}
}
次に、プログレスバーのスタイルを使って色を変更する方法のいくつかはすでにsetUIや他の種類の方法でうまくいくでしょう。
ありがとうございました。私はそれを行うための方法は、ここでそれは私がその後、この1つは進歩の実際の値を受け取るために起こっている、私はリスナーの更新を使用するカスタムプログレスバーを作成し、あるい
ソリューション
バーとバー自体を表示するには、objを取得して、進捗バーのスタイルを見つけ、必要な16進数でbackgroundColorとborderRightColorを変更し、backgroundImageを空のURLに設定し、背景色が表示されるようにします。
また、デフォルトの色を送信するオプションを作成します。ここで
はコードです：デフォルトの色と
Ext.create('progressBarCustom', {
min : 0.20,
ave : 0.60,
max : 0.80
});
か、単に：次に
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', {
color : "#4D0099"
});
提案が届きましたら、ありがとうございます。