CODEWITHSUNDEEP
javascriptextjs
vedvrat13
vedvrat13

Reputation: 466

To Show a Continuous ProgressBar using ExtJS

Problem:- I need to embed a progressbar that will run continuously until the completion of the operation. ExtJS provides a Progressbar Ext.Progressbar which will:-
a) Run Continuously using wait method
b) Run after updating the updateProgress method.

In both the cases output of the progressbar will be

alt text

The solution that i am trying for is:-
Step 1 : alt text
Step 2 : alt text
Step 3 : alt text

Kindly suggest me a solution or a approach. The JavaScript library that i am using is ExtJS. Thanks in Advance.

Links Referred for the example:-
http://dev.sencha.com/deploy/dev/examples/simple-widgets/progress-bar.html

Upvotes: 0

Views: 8931

Answers (4)

Deeptechtons
Deeptechtons

Reputation: 46

Ext.get('buttonID').on('click', function(){
    Ext.MessageBox.show({
       msg: 'Saving your data, please wait...',
       progressText: 'Saving...',
       width:300,
       wait:true,
       waitConfig: {interval:200},
       icon:'ext-mb-download', 
       animEl: 'buttonID'
   });
    setTimeout(function(){
        //This simulates a long-running operation like a database save or XHR call.
        //In real code, this would be in a callback function.
        Ext.MessageBox.hide();
        Ext.example.msg('Done', 'Your fake data was saved!');
    }, 8000);
});

Upvotes: 1

user207968
user207968

Reputation:

Another approach using JavaScript: you could animate the left margin of a colored div (the progress indicator) within a parent div (the progress bar), using setTimeout or a simple animation library such as emile.js

ExtJS also provides an optional animation in setters of the Ext.Element class:

  • you could call setX(x,animation) with the optional argument animate on the progress indicator at each step
  • or insert a transparent "pusher" element before the progress indicator, and call setWidth(width,animate) on the "pusher" to push the progress indicator right

In both cases, you should provide a completion callback in animation options to reset the animation and loop.

Upvotes: 0

user207968
user207968

Reputation:

Here is a simple approach: you could create an animated Gif displaying the continuous progress bar that you described:

  • create the img element with the gif as src dynamically at the start of your operation
  • remove the img element on completion

or if you want to display the empty progress bar before the operation and the complete progress bar after completion:

  • include an img element with src attribute pointing to an image of the empty progress bar
  • update the img src to refer to the animated gif
  • update the img src to refer to an image of the full progress bar at the end

Upvotes: 1

Chris Morgan
Chris Morgan

Reputation: 90832

I gather Ext JS used to provide an indeterminate progress bar over three years ago, in 0.4; however due to the way browsers can stop animated GIFs it was removed. You could reinstate it with styles as indicated on that forum post - use something like Firebug to see what you should style.

Forum reference

Upvotes: 0

Related Questions