X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..ddde20c4d4ac6a8d53de079761155de813845b3c:/examples/simple-widgets/progress-bar.js diff --git a/examples/simple-widgets/progress-bar.js b/examples/simple-widgets/progress-bar.js index 58e6f8ae..fd233f30 100644 --- a/examples/simple-widgets/progress-bar.js +++ b/examples/simple-widgets/progress-bar.js @@ -1,111 +1,111 @@ /*! - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC + * Ext JS Library 3.2.0 + * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.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); - } - } - } +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); + } + } + } }(); \ No newline at end of file