藏經閣

一切有為法,如夢幻泡影,如露亦如電,應作如是觀。

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>

如何在Blogger新增隨機文章

Blogger Hack - How to add a Random Post Gadget in Blogger)

 


0 意見

張貼留言