PDA

View Full Version : ProgressBar text font/color



ssamuel68
22 Apr 2013, 6:16 AM
Hi,

I got a simple progress bar, but I want to change the font-size of the text. I know how to change the inside color but not the font-size / color of the text.

Thx

slemmon
23 Apr 2013, 9:33 PM
Have you inspected the element / elements created in the progress bar using Firebug, Chrome Dev Tools, etc.? That's how I've set individual CSS rules for components/elements in the past.

ssamuel68
24 Apr 2013, 11:07 AM
Thx @slemmon

I use the UI atribute on my progressBar

CSS:


.x-progress-progress1 .x-progress-bar {
border-right-color: #FF3D0D;
border-top-color: #FF3D0D;
background-image: none;
background-color: #FF3D0D;
}


Ext:


var cant = 20; //Calculated
var total = 100; // Calculated
var progress = Math.round((cant * 100)/parseInt(total));

if(progress < 30)
progressBar.setUI('progress1');
.
.
.



With the setUI() you can change the color of the progressBar, just play with the color.

If you want a static color you also can do the following:
cant and total are precalculated.


var progress = (cant * 100)/ total;

var progressBar = Ext.create('Ext.ProgressBar', {
border: true,
width: 200,
value: progress / 100,
text: progress+'%' ,
//text: total+'/'+value,
ui: 'progress1'
});


I think this post can be mark as answered.