JavaScript DHTML/Ext JS/ProgressBar — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
м (1 версия)
 
(нет различий)

Текущая версия на 07:21, 26 мая 2010

ProgressBar: Rendered on page load, left-aligned text and % width

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/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);
            }
        }
    }
}();
</script>
</head>
<body>
<h1>Progress Bar</h1>
<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>



Rendered like Windows XP with custom progress text element

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/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);
            }
        }
    }
}();
</script>
</head>
<body>
<h1>Progress Bar</h1>
<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>



Use the ProgressBar class.

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/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);
            }
        }
    }
}();
</script>
</head>
<body>
<h1>Progress Bar</h1>
<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>



Wait for a long operation to complete (example will stop after 5 secs)

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<!-- Revised from demo code in ext3.0.0 -->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/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);
            }
        }
    }
}();
</script>
</head>
<body>
<h1>Progress Bar</h1>
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/ProgressBar&oldid=2371»