2012/11/08

[ExtJS 4] Change Progress Bar Color Dynamically According to the Value of Progress Bar

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.

image

blue progress bar if value < 0.5

image

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>

台灣好行:後慈湖、大溪老街半日遊

要搭台灣好行 慈湖線 (票價100)的朋友,可以在【中壢火車前站】出口,往左邊直走5分鐘到【桃園客運總站】搭乘。搭車到最後一站【慈湖】後可以看到導覽服務站。後慈湖算是管制區,需要先 上網申請 才可以進入,如果是搭台灣好行的話,可以直接在服務站登記候補。假日通常都是人滿為患,建議如...