Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / simple-widgets / progress-bar.js

diff --git a/examples/simple-widgets/progress-bar.js b/examples/simple-widgets/progress-bar.js
index e9bf3f4..52564d9 100644 (file)
--- a/examples/simple-widgets/progress-bar.js
+++ b/examples/simple-widgets/progress-bar.js
@@ -1,64 +1,97 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
+Ext.require([
+    'Ext.ProgressBar'
+]);
+
 Ext.onReady(function(){
+    //Please do not use the following runner 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 1 ====
-    var pbar1 = new Ext.ProgressBar({
+    var pbar1 = Ext.create('Ext.ProgressBar', {
        text:'Initializing...'
     });
+
     var btn1 = Ext.get('btn1');
-    btn1.on('click', function(){
+    btn1.on('click', function() {
         Ext.fly('p1text').update('Working');
-        if (!pbar1.rendered){
+        if (!pbar1.rendered) {
             pbar1.render('p1');
-        }else{
+        } else {
             pbar1.text = 'Initializing...';
             pbar1.show();
         }
-        Runner.run(pbar1, Ext.get('btn1'), 10, function(){
+        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({
+    var pbar2 = Ext.create('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(){
+
+    btn2.on('click', function() {
+        Runner.run(pbar2, btn2, 12, function() {
             pbar2.reset();
             pbar2.updateText('Done.');
         });
     });
 
     //==== Progress bar 3 ====
-    var pbar3 = new Ext.ProgressBar({
+    var pbar3 = Ext.create('Ext.ProgressBar', {
         id:'pbar3',
         width:300,
         renderTo:'p3'
     });
-    pbar3.on('update', function(val){
+
+    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(){
+            interval: 200,
+            duration: 5000,
+            increment: 15,
+            fn:function() {
                 btn3.dom.disabled = false;
                 Ext.fly('p3text').update('Done');
             }
@@ -66,46 +99,19 @@ Ext.onReady(function(){
     });
 
     //==== Progress bar 4 ====
-    var pbar4 = new Ext.ProgressBar({
+    var pbar4 = Ext.create('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(){
+
+    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