/ext-4.1.0_b3/examples/simple-widgets/progress-bar.js

https://bitbucket.org/srogerf/javascript · JavaScript · 117 lines · 96 code · 13 blank · 8 comment · 5 complexity · f3a71c26c58da3def6670889df645447 MD5 · raw file

  1. Ext.require([
  2. 'Ext.ProgressBar'
  3. ]);
  4. Ext.onReady(function(){
  5. //Please do not use the following runner code as a best practice! :)
  6. var Runner = function(){
  7. var f = function(v, pbar, btn, count, cb){
  8. return function(){
  9. if(v > count){
  10. btn.dom.disabled = false;
  11. cb();
  12. }else{
  13. if(pbar.id=='pbar4'){
  14. //give this one a different count style for fun
  15. var i = v/count;
  16. pbar.updateProgress(i, Math.round(100*i)+'% completed...');
  17. }else{
  18. pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');
  19. }
  20. }
  21. };
  22. };
  23. return {
  24. run : function(pbar, btn, count, cb) {
  25. btn.dom.disabled = true;
  26. var ms = 5000/count;
  27. for(var i = 1; i < (count+2); i++){
  28. setTimeout(f(i, pbar, btn, count, cb), i*ms);
  29. }
  30. }
  31. };
  32. }();
  33. //==== Progress bar 1 ====
  34. var pbar1 = Ext.create('Ext.ProgressBar', {
  35. text:'Initializing...'
  36. });
  37. var btn1 = Ext.get('btn1');
  38. btn1.on('click', function() {
  39. Ext.fly('p1text').update('Working');
  40. if (!pbar1.rendered) {
  41. pbar1.render('p1');
  42. } else {
  43. pbar1.text = 'Initializing...';
  44. pbar1.show();
  45. }
  46. Runner.run(pbar1, Ext.get('btn1'), 10, function() {
  47. pbar1.reset(true);
  48. Ext.fly('p1text').update('Done.').show();
  49. });
  50. });
  51. //==== Progress bar 2 ====
  52. var pbar2 = Ext.create('Ext.ProgressBar', {
  53. text:'Ready',
  54. id:'pbar2',
  55. cls:'left-align',
  56. renderTo:'p2'
  57. });
  58. var btn2 = Ext.get('btn2');
  59. btn2.on('click', function() {
  60. Runner.run(pbar2, btn2, 12, function() {
  61. pbar2.reset();
  62. pbar2.updateText('Done.');
  63. });
  64. });
  65. //==== Progress bar 3 ====
  66. var pbar3 = Ext.create('Ext.ProgressBar', {
  67. id:'pbar3',
  68. width:300,
  69. renderTo:'p3'
  70. });
  71. pbar3.on('update', function(val) {
  72. //You can handle this event at each progress interval if
  73. //needed to perform some other action
  74. Ext.fly('p3text').dom.innerHTML += '.';
  75. });
  76. var btn3 = Ext.get('btn3');
  77. btn3.on('click', function(){
  78. Ext.fly('p3text').update('Working');
  79. btn3.dom.disabled = true;
  80. pbar3.wait({
  81. interval: 200,
  82. duration: 5000,
  83. increment: 15,
  84. fn:function() {
  85. btn3.dom.disabled = false;
  86. Ext.fly('p3text').update('Done');
  87. }
  88. });
  89. });
  90. //==== Progress bar 4 ====
  91. var pbar4 = Ext.create('Ext.ProgressBar', {
  92. text:'Waiting on you...',
  93. id:'pbar4',
  94. textEl:'p4text',
  95. cls:'custom',
  96. renderTo:'p4'
  97. });
  98. var btn4 = Ext.get('btn4');
  99. btn4.on('click', function() {
  100. Runner.run(pbar4, btn4, 19, function() {
  101. pbar4.updateText('All finished!');
  102. });
  103. });
  104. });