进度条(Progress Bar)

Posted 周五, 06/27/2008 - 11:46 by admin


演示(demo)地址在文章最后.

效果图如下

主要文件progress-bar.html,progress-bar.js,progress-bar.css,。

progress-bar.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ProgressBar</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="progress-bar.js"></script>
<link rel="stylesheet" type="text/css" href="progress-bar.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Progress Bar</h1>
<p>The example shows how to use the ProgressBar class. The js is not minified so it is readable.
See <a href="progress-bar.js">progress-bar.js</a>.</p>

<p>
    <b>Basic Progress Bar</b><br />
    Deferred rendering, dynamic show/hide and built-in progress text:
    <button id="btn1">Show</button><br />
    <div class="status" id="p1text">Nothing to see here.</div>
    <div id="p1" style="width:300px;"></div>
</p>

<p>
    <b>Additional Options</b><br />
    Rendered on page load, left-aligned text and % width:
    <button id="btn2">Show</button><br />
    <div id="p2" style="width:50%;"></div>
</p>

<p>
    <b>Waiting Bar</b><br />
    Wait for a long operation to complete (example will stop after 5 secs):
    <button id="btn3">Show</button><br />
    <div id="p3"></div>
    <span class="status" id="p3text">Ready</span>
</p>

<p>
    <b>Custom Styles</b><br />
    Rendered like Windows XP with custom progress text element:
    <button id="btn4">Show</button><br />
    <div id="p4" style="width:300px;"></div>
    <div class="status"><b>Status:</b> <span id="p4text"></span></div>
</p>

</body>
</html>

progress-bar.js

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

Ext.onReady(function(){
    //==== Progress bar 1 ====
    var pbar1 = new Ext.ProgressBar({
       text:'Initializing...'
    });
    var btn1 = Ext.get('btn1');
    btn1.on('click', function(){
        Ext.fly('p1text').update('Working');
        if (!pbar1.rendered){
            pbar1.render('p1');
        }else{
            pbar1.text = 'Initializing...';
            pbar1.show();
        }
        Runner.run(pbar1, Ext.get('btn1'), 10, function(){
            pbar1.reset(true);
            Ext.fly('p1text').update('Done.').show();
        });
    });

    //==== Progress bar 2 ====
    var pbar2 = new Ext.ProgressBar({
        text:'Ready',
        id:'pbar2',
        cls:'left-align',
        renderTo:'p2'
    });
    var btn2 = Ext.get('btn2');
    btn2.on('click', function(){
        Runner.run(pbar2, btn2, 12, function(){
            pbar2.reset();
            pbar2.updateText('Done.');
        });
    });

    //==== Progress bar 3 ====
    var pbar3 = new Ext.ProgressBar({
        id:'pbar3',
        width:300,
        renderTo:'p3'
    });
    pbar3.on('update', function(val){
        //You can handle this event at each progress interval if
        //needed to perform some other action
        Ext.fly('p3text').dom.innerHTML += '.';
    });
    var btn3 = Ext.get('btn3');
    btn3.on('click', function(){
        Ext.fly('p3text').update('Working');
        btn3.dom.disabled = true;
        pbar3.wait({
            interval:200,
            duration:5000,
            increment:15,
            fn:function(){
                btn3.dom.disabled = false;
                Ext.fly('p3text').update('Done');
            }
        });
    });

    //==== Progress bar 4 ====
    var pbar4 = new Ext.ProgressBar({
        text:'Waiting on you...',
        id:'pbar4',
        textEl:'p4text',
        cls:'custom',
        renderTo:'p4'
    });
    var btn4 = Ext.get('btn4');
    btn4.on('click', function(){
        Runner.run(pbar4, btn4, 19, function(){
            pbar4.updateText('All finished!');
        });
    });
});

//Please do not use the following code as a best practice! :)
var Runner = function(){
    var f = function(v, pbar, btn, count, cb){
        return function(){
            if(v > count){
                btn.dom.disabled = false;
                cb();
            }else{
                if(pbar.id=='pbar4'){
                    //give this one a different count style for fun
                    var i = v/count;
                    pbar.updateProgress(i, Math.round(100*i)+'% completed...');
                }else{
                    pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
                }
            }
       };
    };
    return {
        run : function(pbar, btn, count, cb){
            btn.dom.disabled = true;
            var ms = 5000/count;
            for(var i = 1; i < (count+2); i++){
               setTimeout(f(i, pbar, btn, count, cb), i*ms);
            }
        }
    }
}();

progress-bar.css

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing＠extjs.com
 * 
 * extjs.com/license
 */

.status {
    color:#555;
}
.x-progress-wrap.left-align .x-progress-text {
    text-align:left;
}
.x-progress-wrap.custom {
    height:17px;
    border:1px solid #686868;
    overflow:hidden;
    padding:0 2px;
}
.ext-ie .x-progress-wrap.custom {
    height:19px;
}
.custom .x-progress-inner {
    height:17px;
    background: #fff;
}
.custom .x-progress-bar {
    height:15px;
    background:transparent url(images/custom-bar.gif) repeat-x 0 0;
    border-top:1px solid #BEBEBE;
    border-bottom:1px solid #EFEFEF;
    border-right:0;
}

演示地址:http://extjs.org.cn/extjs/examples/simple-widgets/progress-bar.html

  • 要发表评论，请先登录