docs/source/ProgressBar2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-ProgressBar'>/**
  19 </span> * An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
  20  *
  21  * In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the progress bar
  22  * as needed from your own code. This method is most appropriate when you want to show progress throughout an operation
  23  * that has predictable points of interest at which you can update the control.
  24  *
  25  * In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it once the
  26  * operation is complete. You can optionally have the progress bar wait for a specific amount of time and then clear
  27  * itself. Automatic mode is most appropriate for timed operations or asynchronous operations in which you have no need
  28  * for indicating intermediate progress.
  29  *
  30  *     @example
  31  *     var p = Ext.create('Ext.ProgressBar', {
  32  *        renderTo: Ext.getBody(),
  33  *        width: 300
  34  *     });
  35  *
  36  *     // Wait for 5 seconds, then update the status el (progress bar will auto-reset)
  37  *     p.wait({
  38  *         interval: 500, //bar will move fast!
  39  *         duration: 50000,
  40  *         increment: 15,
  41  *         text: 'Updating...',
  42  *         scope: this,
  43  *         fn: function(){
  44  *             p.updateText('Done!');
  45  *         }
  46  *     });
  47  */
  48 Ext.define('Ext.ProgressBar', {
  49     extend: 'Ext.Component',
  50     alias: 'widget.progressbar',
  51
  52     requires: [
  53         'Ext.Template',
  54         'Ext.CompositeElement',
  55         'Ext.TaskManager',
  56         'Ext.layout.component.ProgressBar'
  57     ],
  58
  59     uses: ['Ext.fx.Anim'],
  60
  61 <span id='Ext-ProgressBar-cfg-value'>   /**
  62 </span>    * @cfg {Number} [value=0]
  63     * A floating point value between 0 and 1 (e.g., .5)
  64     */
  65
  66 <span id='Ext-ProgressBar-cfg-text'>   /**
  67 </span>    * @cfg {String} [text='']
  68     * The progress bar text (defaults to '')
  69     */
  70
  71 <span id='Ext-ProgressBar-cfg-textEl'>   /**
  72 </span>    * @cfg {String/HTMLElement/Ext.Element} textEl
  73     * The element to render the progress text to (defaults to the progress bar's internal text element)
  74     */
  75
  76 <span id='Ext-ProgressBar-cfg-id'>   /**
  77 </span>    * @cfg {String} id
  78     * The progress bar element's id (defaults to an auto-generated id)
  79     */
  80
  81 <span id='Ext-ProgressBar-cfg-baseCls'>   /**
  82 </span>    * @cfg {String} [baseCls='x-progress']
  83     * The base CSS class to apply to the progress bar's wrapper element.
  84     */
  85     baseCls: Ext.baseCSSPrefix + 'progress',
  86
  87     config: {
  88 <span id='Ext-ProgressBar-cfg-animate'>        /**
  89 </span>        * @cfg {Boolean} animate
  90         * True to animate the progress bar during transitions
  91         */
  92         animate: false,
  93
  94 <span id='Ext-ProgressBar-cfg-text'>        /**
  95 </span>         * @cfg {String} text
  96          * The text shown in the progress bar
  97          */
  98         text: ''
  99     },
 100
 101     // private
 102     waitTimer: null,
 103
 104     renderTpl: [
 105         '&lt;div class=&quot;{baseCls}-text {baseCls}-text-back&quot;&gt;',
 106             '&lt;div&gt;&amp;#160;&lt;/div&gt;',
 107         '&lt;/div&gt;',
 108         '&lt;div id=&quot;{id}-bar&quot; class=&quot;{baseCls}-bar&quot;&gt;',
 109             '&lt;div class=&quot;{baseCls}-text&quot;&gt;',
 110                 '&lt;div&gt;&amp;#160;&lt;/div&gt;',
 111             '&lt;/div&gt;',
 112         '&lt;/div&gt;'
 113     ],
 114
 115     componentLayout: 'progressbar',
 116
 117     // private
 118     initComponent: function() {
 119         this.callParent();
 120
 121         this.addChildEls('bar');
 122
 123         this.addEvents(
 124 <span id='Ext-ProgressBar-event-update'>            /**
 125 </span>             * @event update
 126              * Fires after each update interval
 127              * @param {Ext.ProgressBar} this
 128              * @param {Number} value The current progress value
 129              * @param {String} text The current progress text
 130              */
 131             &quot;update&quot;
 132         );
 133     },
 134
 135     afterRender : function() {
 136         var me = this;
 137
 138         // This produces a composite w/2 el's (which is why we cannot use childEls or
 139         // renderSelectors):
 140         me.textEl = me.textEl ? Ext.get(me.textEl) : me.el.select('.' + me.baseCls + '-text');
 141
 142         me.callParent(arguments);
 143
 144         if (me.value) {
 145             me.updateProgress(me.value, me.text);
 146         }
 147         else {
 148             me.updateText(me.text);
 149         }
 150     },
 151
 152 <span id='Ext-ProgressBar-method-updateProgress'>    /**
 153 </span>     * Updates the progress bar value, and optionally its text. If the text argument is not specified, any existing text
 154      * value will be unchanged. To blank out existing text, pass ''. Note that even if the progress bar value exceeds 1,
 155      * it will never automatically reset -- you are responsible for determining when the progress is complete and
 156      * calling {@link #reset} to clear and/or hide the control.
 157      * @param {Number} [value=0] A floating point value between 0 and 1 (e.g., .5)
 158      * @param {String} [text=''] The string to display in the progress text element
 159      * @param {Boolean} [animate=false] Whether to animate the transition of the progress bar. If this value is not
 160      * specified, the default for the class is used
 161      * @return {Ext.ProgressBar} this
 162      */
 163     updateProgress: function(value, text, animate) {
 164         var me = this,
 165             newWidth;
 166
 167         me.value = value || 0;
 168         if (text) {
 169             me.updateText(text);
 170         }
 171         if (me.rendered &amp;&amp; !me.isDestroyed) {
 172             if (me.isVisible(true)) {
 173                 newWidth = Math.floor(me.value * me.el.getWidth(true));
 174                 if (Ext.isForcedBorderBox) {
 175                     newWidth += me.bar.getBorderWidth(&quot;lr&quot;);
 176                 }
 177                 if (animate === true || (animate !== false &amp;&amp; me.animate)) {
 178                     me.bar.stopAnimation();
 179                     me.bar.animate(Ext.apply({
 180                         to: {
 181                             width: newWidth + 'px'
 182                         }
 183                     }, me.animate));
 184                 } else {
 185                     me.bar.setWidth(newWidth);
 186                 }
 187             } else {
 188                 // force a layout when we're visible again
 189                 me.doComponentLayout();
 190             }
 191         }
 192         me.fireEvent('update', me, me.value, text);
 193         return me;
 194     },
 195
 196 <span id='Ext-ProgressBar-method-updateText'>    /**
 197 </span>     * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress bar itself will
 198      * display the updated text.
 199      * @param {String} [text=''] The string to display in the progress text element
 200      * @return {Ext.ProgressBar} this
 201      */
 202     updateText: function(text) {
 203         var me = this;
 204
 205         me.text = text;
 206         if (me.rendered) {
 207             me.textEl.update(me.text);
 208         }
 209         return me;
 210     },
 211
 212     applyText : function(text) {
 213         this.updateText(text);
 214     },
 215
 216 <span id='Ext-ProgressBar-method-wait'>    /**
 217 </span>     * Initiates an auto-updating progress bar. A duration can be specified, in which case the progress bar will
 218      * automatically reset after a fixed amount of time and optionally call a callback function if specified. If no
 219      * duration is passed in, then the progress bar will run indefinitely and must be manually cleared by calling
 220      * {@link #reset}.
 221      *
 222      * Example usage:
 223      *
 224      *     var p = new Ext.ProgressBar({
 225      *        renderTo: 'my-el'
 226      *     });
 227      *
 228      *     //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
 229      *     var p = Ext.create('Ext.ProgressBar', {
 230      *        renderTo: Ext.getBody(),
 231      *        width: 300
 232      *     });
 233      *
 234      *     //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
 235      *     p.wait({
 236      *        interval: 500, //bar will move fast!
 237      *        duration: 50000,
 238      *        increment: 15,
 239      *        text: 'Updating...',
 240      *        scope: this,
 241      *        fn: function(){
 242      *           p.updateText('Done!');
 243      *        }
 244      *     });
 245      *
 246      *     //Or update indefinitely until some async action completes, then reset manually
 247      *     p.wait();
 248      *     myAction.on('complete', function(){
 249      *         p.reset();
 250      *         p.updateText('Done!');
 251      *     });
 252      *
 253      * @param {Object} config (optional) Configuration options
 254      * @param {Number} config.duration The length of time in milliseconds that the progress bar should
 255      * run before resetting itself (defaults to undefined, in which case it will run indefinitely
 256      * until reset is called)
 257      * @param {Number} config.interval The length of time in milliseconds between each progress update
 258      * (defaults to 1000 ms)
 259      * @param {Boolean} config.animate Whether to animate the transition of the progress bar. If this
 260      * value is not specified, the default for the class is used.
 261      * @param {Number} config.increment The number of progress update segments to display within the
 262      * progress bar (defaults to 10).  If the bar reaches the end and is still updating, it will
 263      * automatically wrap back to the beginning.
 264      * @param {String} config.text Optional text to display in the progress bar element (defaults to '').
 265      * @param {Function} config.fn A callback function to execute after the progress bar finishes auto-
 266      * updating.  The function will be called with no arguments.  This function will be ignored if
 267      * duration is not specified since in that case the progress bar can only be stopped programmatically,
 268      * so any required function should be called by the same code after it resets the progress bar.
 269      * @param {Object} config.scope The scope that is passed to the callback function (only applies when
 270      * duration and fn are both passed).
 271      * @return {Ext.ProgressBar} this
 272      */
 273     wait: function(o) {
 274         var me = this;
 275
 276         if (!me.waitTimer) {
 277             scope = me;
 278             o = o || {};
 279             me.updateText(o.text);
 280             me.waitTimer = Ext.TaskManager.start({
 281                 run: function(i){
 282                     var inc = o.increment || 10;
 283                     i -= 1;
 284                     me.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
 285                 },
 286                 interval: o.interval || 1000,
 287                 duration: o.duration,
 288                 onStop: function(){
 289                     if (o.fn) {
 290                         o.fn.apply(o.scope || me);
 291                     }
 292                     me.reset();
 293                 },
 294                 scope: scope
 295             });
 296         }
 297         return me;
 298     },
 299
 300 <span id='Ext-ProgressBar-method-isWaiting'>    /**
 301 </span>     * Returns true if the progress bar is currently in a {@link #wait} operation
 302      * @return {Boolean} True if waiting, else false
 303      */
 304     isWaiting: function(){
 305         return this.waitTimer !== null;
 306     },
 307
 308 <span id='Ext-ProgressBar-method-reset'>    /**
 309 </span>     * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress bar will also be hidden
 310      * (using the {@link #hideMode} property internally).
 311      * @param {Boolean} [hide=false] True to hide the progress bar.
 312      * @return {Ext.ProgressBar} this
 313      */
 314     reset: function(hide){
 315         var me = this;
 316
 317         me.updateProgress(0);
 318         me.clearTimer();
 319         if (hide === true) {
 320             me.hide();
 321         }
 322         return me;
 323     },
 324
 325     // private
 326     clearTimer: function(){
 327         var me = this;
 328
 329         if (me.waitTimer) {
 330             me.waitTimer.onStop = null; //prevent recursion
 331             Ext.TaskManager.stop(me.waitTimer);
 332             me.waitTimer = null;
 333         }
 334     },
 335
 336     onDestroy: function(){
 337         var me = this;
 338
 339         me.clearTimer();
 340         if (me.rendered) {
 341             if (me.textEl.isComposite) {
 342                 me.textEl.clear();
 343             }
 344             Ext.destroyMembers(me, 'textEl', 'progressBar');
 345         }
 346         me.callParent();
 347     }
 348 });
 349 </pre>
 350 </body>
 351 </html>