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>

沒有留言:

4種PDF轉Word的免費方法(pdf to word, pdf to doc, pdf2word, pdf2doc)

本文將介紹4種 將PDF轉Word檔 的方法,分別分析其效能、方便性、精確性等指標。 1. nitropdf提供的線上 Convert PDF to Word (DOC) 這是一個 線上免費PDF轉Word檔 的服務,網址: http://www.pdftoword.com...