Clear Up
SharpKit Reference

ProgressBar Class

An updateable progress bar component. The progress bar supports two different modes: manual and automatic.

In manual mode, you are responsible for showing, updating (via updateProgress) and clearing the progress bar as needed from your own code. This method is most appropriate when you want to show progress throughout an operation that has predictable points of interest at which you can update the control.

In automatic mode, you simply call wait and let the progress bar run indefinitely, only clearing it once the operation is complete. You can optionally have the progress bar wait for a specific amount of time and then clear itself. Automatic mode is most appropriate for timed operations or asynchronous operations in which you have no need for indicating intermediate progress.

  
var p = Ext.create('Ext.ProgressBar', {
            renderTo: Ext.getBody(),
            width: 300
            });
            // Wait for 5 seconds, then update the status el (progress bar will auto-reset)
            p.wait({
            interval: 500, //bar will move fast!
            duration: 50000,
            increment: 15,
            text: 'Updating...',
            scope: this,
            fn: function(){
            p.updateText('Done!');
            }
            });
            

Namespace: Ext

Methods

Name Description
isWaiting() Returns true if the progress bar is currently in a wait operation
reset(object) Resets the progress bar value to 0 and text to empty string. If hide = true, the progress bar will also be hidden (using the hideMode property internally).
updateProgress(object, object, object) Updates the progress bar value, and optionally its text. If the text argument is not specified, any existing text value will be unchanged. To blank out existing text, pass ''. Note that even if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for determining when the progress is complete and calling reset to clear and/or hide the control.
updateText(object) Updates the progress bar text. If specified, textEl will be updated, otherwise the progress bar itself will display the updated text.
wait(object) Initiates an auto-updating progress bar. A duration can be specified, in which case the progress bar will automatically reset after a fixed amount of time and optionally call a callback function if specified. If no duration is passed in, then the progress bar will run indefinitely and must be manually cleared by calling reset. Example usage:
var p = new Ext.ProgressBar({
            renderTo: 'my-el'
            });
            //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
            var p = Ext.create('Ext.ProgressBar', {
            renderTo: Ext.getBody(),
            width: 300
            });
            //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
            p.wait({
            interval: 500, //bar will move fast!
            duration: 50000,
            increment: 15,
            text: 'Updating...',
            scope: this,
            fn: function(){
            p.updateText('Done!');
            }
            });
            //Or update indefinitely until some async action completes, then reset manually
            p.wait();
            myAction.on('complete', function(){
            p.reset();
            p.updateText('Done!');
            });
            

Fields

Name Description
text The text shown in the progress bar. Defaults to: ""
textEl The element to render the progress text to (defaults to the progress bar's internal text element)
value A floating point value between 0 and 1 (e.g., .5) Defaults to: 0
© Copyright 2005-2011 SharpKit. All rights reserved.