-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
- //==== Progress bar 1 ====\r
- var pbar1 = new Ext.ProgressBar({\r
- text:'Initializing...'\r
- });\r
- var btn1 = Ext.get('btn1');\r
- btn1.on('click', function(){\r
- Ext.fly('p1text').update('Working');\r
- if (!pbar1.rendered){\r
- pbar1.render('p1');\r
- }else{\r
- pbar1.text = 'Initializing...';\r
- pbar1.show();\r
- }\r
- Runner.run(pbar1, Ext.get('btn1'), 10, function(){\r
- pbar1.reset(true);\r
- Ext.fly('p1text').update('Done.').show();\r
- });\r
- });\r
-\r
- //==== Progress bar 2 ====\r
- var pbar2 = new Ext.ProgressBar({\r
- text:'Ready',\r
- id:'pbar2',\r
- cls:'left-align',\r
- renderTo:'p2'\r
- });\r
- var btn2 = Ext.get('btn2');\r
- btn2.on('click', function(){\r
- Runner.run(pbar2, btn2, 12, function(){\r
- pbar2.reset();\r
- pbar2.updateText('Done.');\r
- });\r
- });\r
-\r
- //==== Progress bar 3 ====\r
- var pbar3 = new Ext.ProgressBar({\r
- id:'pbar3',\r
- width:300,\r
- renderTo:'p3'\r
- });\r
- pbar3.on('update', function(val){\r
- //You can handle this event at each progress interval if\r
- //needed to perform some other action\r
- Ext.fly('p3text').dom.innerHTML += '.';\r
- });\r
- var btn3 = Ext.get('btn3');\r
- btn3.on('click', function(){\r
- Ext.fly('p3text').update('Working');\r
- btn3.dom.disabled = true;\r
- pbar3.wait({\r
- interval:200,\r
- duration:5000,\r
- increment:15,\r
- fn:function(){\r
- btn3.dom.disabled = false;\r
- Ext.fly('p3text').update('Done');\r
- }\r
- });\r
- });\r
-\r
- //==== Progress bar 4 ====\r
- var pbar4 = new Ext.ProgressBar({\r
- text:'Waiting on you...',\r
- id:'pbar4',\r
- textEl:'p4text',\r
- cls:'custom',\r
- renderTo:'p4'\r
- });\r
- var btn4 = Ext.get('btn4');\r
- btn4.on('click', function(){\r
- Runner.run(pbar4, btn4, 19, function(){\r
- pbar4.updateText('All finished!');\r
- });\r
- });\r
-});\r
-\r
-//Please do not use the following code as a best practice! :)\r
-var Runner = function(){\r
- var f = function(v, pbar, btn, count, cb){\r
- return function(){\r
- if(v > count){\r
- btn.dom.disabled = false;\r
- cb();\r
- }else{\r
- if(pbar.id=='pbar4'){\r
- //give this one a different count style for fun\r
- var i = v/count;\r
- pbar.updateProgress(i, Math.round(100*i)+'% completed...');\r
- }else{\r
- pbar.updateProgress(v/count, 'Loading item ' + v + ' of '+count+'...');\r
- }\r
- }\r
- };\r
- };\r
- return {\r
- run : function(pbar, btn, count, cb){\r
- btn.dom.disabled = true;\r
- var ms = 5000/count;\r
- for(var i = 1; i < (count+2); i++){\r
- setTimeout(f(i, pbar, btn, count, cb), i*ms);\r
- }\r
- }\r
- }\r
-}();
\ No newline at end of file
+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 = Ext.create('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 = 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() {
+ pbar2.reset();
+ pbar2.updateText('Done.');
+ });
+ });
+
+ //==== Progress bar 3 ====
+ var pbar3 = Ext.create('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 = 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() {
+ pbar4.updateText('All finished!');
+ });
+ });
+});
git.ithinksw.org / extjs.git / blobdiff