Extjs 4: come modificare dinamicamente il colore della barra di avanzamento?

Question

Domandarisposta sotto

Ciao Sto cercando un modo semplice per cambiare il colore di una barra di avanzamento, quello che sto cercando di fare con esso, sarebbe simile a questa:

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

Quindi un qualche modo per cambiare il colore attraverso lo stile con la barra di avanzamento del metodo ha già, setUI, o un altro tipo di modo in cui potrebbe funzionare sarebbe grande.

Grazie.

Soluzione

ho trovato il modo di farlo, qui è, creo una barra di avanzamento personalizzato, in cui io uso l'aggiornamento ascoltatore, allora questo sta per ricevere il valore reale dello stato di avanzamento barra, e la barra stessa, prendo l'oggetto e trovo gli stili della barra di avanzamento, dove modifico backgroundColor e borderRightColor con il colore esadecimale che voglio e impostando backgroundImage e URL vuoto, consentirà a backgroundcolor di apparire .

Inoltre, creo l'opzione per inviare un colore predefinito.

Ecco il codice:

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

Quindi, se avete intenzione di creare un nuovo ProgressBar con i cambiamenti di colore Ecco il codice:

Ext.create('progressBarCustom', { 
    min : 0.20, 
    ave : 0.60, 
    max : 0.80 
}); 

o semplicemente con un colore predefinito:

Ext.create('progressBarCustom', { 
    color : "#4D0099" 
}); 

Qualsiasi suggerimento sarebbe ricevuto, grazie :).

Answer 1

Suggerirei di aggiungere un listener che chiama la funzione sull'evento move poiché questo sembra contenere le posizioni necessarie. Documentation link.

Per l'aspetto setColor, credo che si desidera impostare i componenti style elementi. Documentation link. Spero possa aiutare.