/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
- 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!');
- });
- });
- });