How to change progressbar background color using javascript

Question

I was looking for how to change the ext.net progressbar background color using JavaScript. possibly adding a CSS class to the progressbar from JavaScript.

I have tried adding a css class but failed. Actually I cant find the function which will facilitate me to add the CSS class to it.

any help will be appreciated.

EDIT:

javascript:

 function ShowProgressBar(progressBar, progressValue, message) {
            progressBar.show();
            progressBar.updateProgress(progressValue, message);
//need to add the css class here something like progressBar.addClass('green-bar')
        }

CSS:

    .green-bar{
        background:#008000;
}

Answer 1

Guys i have solved the issue. just need to change the CSS class name.

CSS:

   .green-bar .x-progress-bar{
        background:#008000;
}

JavaScript:

progressBar.addClass('green-bar'); //obviously i have removed the added css class after use.

Answer 2

You can add listener that calls update function,

listeners: { 
    update: function (obj, val) {
        obj.getElelement().child("PROGRESSBAR_NAME", true).style.backgroundColor = "#FF00CC";
    }
}

Check this Demo Example

Read this Progressbar Documentation help you