ExtJS doesn’t provide API to change progress bar dynamically. However, it’s not too diffcult to make it possible by changing CSS dynamically. In the following example, we implement a lister for update event, which change CSS according to the value of progress bar.
blue progress bar if value < 0.5
red progress bar if value >= 0.5
It’s tested on Firefox 16, Chome 22, and IE 9 with ExtJS 4.1.1a.
| progressbar.htm |
| <html>
<head>
<script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript">
Ext.require([
'Ext.ProgressBar'
]);
Ext.onReady(function(){
var pbar = Ext.create('Ext.ProgressBar', {
id:'pbar',
width:300,
renderTo:'bar',
listeners: {
update: {
fn: function (bar, value) {
if(value<0.5)
this.setUI('blue');
else
this.setUI('red');
}
}
}
});
var btn = Ext.get('btn');
btn.on('click', function(){
pbar.wait({
interval: 500,
duration: 5000,
increment: 15,
fn:function() {
}
});
});
}); </script> <style type="text/css">
.x-progress-red .x-progress-bar {
border-right-color: #FF0000;
border-top-color: #FF0000;
background-image: none;
background-color: #FF0000;
} .x-progress-blue .x-progress-bar {
border-right-color: #0000FF;
border-top-color: #0000FF;
background-image: none;
background-color: #0000FF;
}
</style>
</head>
<body>
<button id="btn">Show</button>
<BR />
<div id="bar"></div>
</body>
</html> |
