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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-cfg-id'><span id='Ext-ProgressBar-cfg-textEl'><span id='Ext-ProgressBar-cfg-text'><span id='Ext-ProgressBar-cfg-value'><span id='Ext-ProgressBar'>/**
  19 </span></span></span></span></span> * @class Ext.ProgressBar
  20  * @extends Ext.Component
  21  * &lt;p&gt;An updateable progress bar component.  The progress bar supports two different modes: manual and automatic.&lt;/p&gt;
  22  * &lt;p&gt;In manual mode, you are responsible for showing, updating (via {@link #updateProgress}) and clearing the
  23  * progress bar as needed from your own code.  This method is most appropriate when you want to show progress
  24  * throughout an operation that has predictable points of interest at which you can update the control.&lt;/p&gt;
  25  * &lt;p&gt;In automatic mode, you simply call {@link #wait} and let the progress bar run indefinitely, only clearing it
  26  * once the operation is complete.  You can optionally have the progress bar wait for a specific amount of time
  27  * and then clear itself.  Automatic mode is most appropriate for timed operations or asynchronous operations in
  28  * which you have no need for indicating intermediate progress.&lt;/p&gt;
  29  * {@img Ext.ProgressBar/Ext.ProgressBar.png Ext.ProgressBar component}
  30  * Example Usage:
  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  * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0)
  48  * @cfg {String} text The progress bar text (defaults to '')
  49  * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress
  50  * bar's internal text element)
  51  * @cfg {String} id The progress bar element's id (defaults to an auto-generated id)
  52  * @xtype progressbar
  53  */
  54 Ext.define('Ext.ProgressBar', {
  55     extend: 'Ext.Component',
  56     alias: 'widget.progressbar',
  57
  58     requires: [
  59         'Ext.Template',
  60         'Ext.CompositeElement',
  61         'Ext.TaskManager',
  62         'Ext.layout.component.ProgressBar'
  63     ],
  64
  65     uses: ['Ext.fx.Anim'],
  66 <span id='Ext-ProgressBar-cfg-baseCls'>   /**
  67 </span>    * @cfg {String} baseCls
  68     * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress')
  69     */
  70     baseCls: Ext.baseCSSPrefix + 'progress',
  71
  72     config: {
  73 <span id='Ext-ProgressBar-cfg-animate'>        /**
  74 </span>        * @cfg {Boolean} animate
  75         * True to animate the progress bar during transitions (defaults to false)
  76         */
  77         animate: false,
  78
  79 <span id='Ext-ProgressBar-cfg-text'>        /**
  80 </span>         * @cfg {String} text The text shown in the progress bar (defaults to '')
  81          */
  82         text: ''
  83     },
  84
  85     // private
  86     waitTimer: null,
  87
  88     renderTpl: [
  89         '&lt;div class=&quot;{baseCls}-text {baseCls}-text-back&quot;&gt;',
  90             '&lt;div&gt;&amp;#160;&lt;/div&gt;',
  91         '&lt;/div&gt;',
  92         '&lt;div class=&quot;{baseCls}-bar&quot;&gt;',
  93             '&lt;div class=&quot;{baseCls}-text&quot;&gt;',
  94                 '&lt;div&gt;&amp;#160;&lt;/div&gt;',
  95             '&lt;/div&gt;',
  96         '&lt;/div&gt;'
  97     ],
  98
  99     componentLayout: 'progressbar',
 100
 101     // private
 102     initComponent: function() {
 103         this.callParent();
 104
 105         this.renderSelectors = Ext.apply(this.renderSelectors || {}, {
 106             textTopEl: '.' + this.baseCls + '-text',
 107             textBackEl: '.' + this.baseCls + '-text-back',
 108             bar: '.' + this.baseCls + '-bar'
 109         });
 110
 111         this.addEvents(
 112 <span id='Ext-ProgressBar-event-update'>            /**
 113 </span>             * @event update
 114              * Fires after each update interval
 115              * @param {Ext.ProgressBar} this
 116              * @param {Number} The current progress value
 117              * @param {String} The current progress text
 118              */
 119             &quot;update&quot;
 120         );
 121     },
 122
 123     afterRender : function() {
 124         var me = this;
 125
 126         me.textEl = me.textEl ? Ext.get(me.textEl) : me.el.select('.' + me.baseCls + '-text');
 127
 128         this.callParent(arguments);
 129
 130         if (me.value) {
 131             me.updateProgress(me.value, me.text);
 132         }
 133         else {
 134             me.updateText(me.text);
 135         }
 136     },
 137
 138 <span id='Ext-ProgressBar-method-updateProgress'>    /**
 139 </span>     * Updates the progress bar value, and optionally its text.  If the text argument is not specified,
 140      * any existing text value will be unchanged.  To blank out existing text, pass ''.  Note that even
 141      * if the progress bar value exceeds 1, it will never automatically reset -- you are responsible for
 142      * determining when the progress is complete and calling {@link #reset} to clear and/or hide the control.
 143      * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0)
 144      * @param {String} text (optional) The string to display in the progress text element (defaults to '')
 145      * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is
 146      * not specified, the default for the class is used (default to false)
 147      * @return {Ext.ProgressBar} this
 148      */
 149     updateProgress: function(value, text, animate) {
 150         var newWidth;
 151         this.value = value || 0;
 152         if (text) {
 153             this.updateText(text);
 154         }
 155         if (this.rendered &amp;&amp; !this.isDestroyed) {
 156             newWidth = Math.floor(this.value * this.el.getWidth(true));
 157             if (Ext.isForcedBorderBox) {
 158                 newWidth += this.bar.getBorderWidth(&quot;lr&quot;);
 159             }
 160             if (animate === true || (animate !== false &amp;&amp; this.animate)) {
 161                 this.bar.stopAnimation();
 162                 this.bar.animate(Ext.apply({
 163                     to: {
 164                         width: newWidth + 'px'
 165                     }
 166                 }, this.animate));
 167             } else {
 168                 this.bar.setWidth(newWidth);
 169             }
 170         }
 171         this.fireEvent('update', this, this.value, text);
 172         return this;
 173     },
 174
 175 <span id='Ext-ProgressBar-method-updateText'>    /**
 176 </span>     * Updates the progress bar text.  If specified, textEl will be updated, otherwise the progress
 177      * bar itself will display the updated text.
 178      * @param {String} text (optional) The string to display in the progress text element (defaults to '')
 179      * @return {Ext.ProgressBar} this
 180      */
 181     updateText: function(text) {
 182         this.text = text;
 183         if (this.rendered) {
 184             this.textEl.update(this.text);
 185         }
 186         return this;
 187     },
 188
 189     applyText : function(text) {
 190         this.updateText(text);
 191     },
 192
 193 <span id='Ext-ProgressBar-method-wait'>    /**
 194 </span>         * Initiates an auto-updating progress bar.  A duration can be specified, in which case the progress
 195          * bar will automatically reset after a fixed amount of time and optionally call a callback function
 196          * if specified.  If no duration is passed in, then the progress bar will run indefinitely and must
 197          * be manually cleared by calling {@link #reset}.  The wait method accepts a config object with
 198          * the following properties:
 199          * &lt;pre&gt;
 200     Property   Type          Description
 201     ---------- ------------  ----------------------------------------------------------------------
 202     duration   Number        The length of time in milliseconds that the progress bar should
 203                              run before resetting itself (defaults to undefined, in which case it
 204                              will run indefinitely until reset is called)
 205     interval   Number        The length of time in milliseconds between each progress update
 206                              (defaults to 1000 ms)
 207     animate    Boolean       Whether to animate the transition of the progress bar. If this value is
 208                              not specified, the default for the class is used.
 209     increment  Number        The number of progress update segments to display within the progress
 210                              bar (defaults to 10).  If the bar reaches the end and is still
 211                              updating, it will automatically wrap back to the beginning.
 212     text       String        Optional text to display in the progress bar element (defaults to '').
 213     fn         Function      A callback function to execute after the progress bar finishes auto-
 214                              updating.  The function will be called with no arguments.  This function
 215                              will be ignored if duration is not specified since in that case the
 216                              progress bar can only be stopped programmatically, so any required function
 217                              should be called by the same code after it resets the progress bar.
 218     scope      Object        The scope that is passed to the callback function (only applies when
 219                              duration and fn are both passed).
 220     &lt;/pre&gt;
 221              *
 222              * Example usage:
 223              * &lt;pre&gt;&lt;code&gt;
 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     &lt;/code&gt;&lt;/pre&gt;
 253          * @param {Object} config (optional) Configuration options
 254          * @return {Ext.ProgressBar} this
 255          */
 256     wait: function(o) {
 257         if (!this.waitTimer) {
 258             var scope = this;
 259             o = o || {};
 260             this.updateText(o.text);
 261             this.waitTimer = Ext.TaskManager.start({
 262                 run: function(i){
 263                     var inc = o.increment || 10;
 264                     i -= 1;
 265                     this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate);
 266                 },
 267                 interval: o.interval || 1000,
 268                 duration: o.duration,
 269                 onStop: function(){
 270                     if (o.fn) {
 271                         o.fn.apply(o.scope || this);
 272                     }
 273                     this.reset();
 274                 },
 275                 scope: scope
 276             });
 277         }
 278         return this;
 279     },
 280
 281 <span id='Ext-ProgressBar-method-isWaiting'>    /**
 282 </span>     * Returns true if the progress bar is currently in a {@link #wait} operation
 283      * @return {Boolean} True if waiting, else false
 284      */
 285     isWaiting: function(){
 286         return this.waitTimer !== null;
 287     },
 288
 289 <span id='Ext-ProgressBar-method-reset'>    /**
 290 </span>     * Resets the progress bar value to 0 and text to empty string.  If hide = true, the progress
 291      * bar will also be hidden (using the {@link #hideMode} property internally).
 292      * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false)
 293      * @return {Ext.ProgressBar} this
 294      */
 295     reset: function(hide){
 296         this.updateProgress(0);
 297         this.clearTimer();
 298         if (hide === true) {
 299             this.hide();
 300         }
 301         return this;
 302     },
 303
 304     // private
 305     clearTimer: function(){
 306         if (this.waitTimer) {
 307             this.waitTimer.onStop = null; //prevent recursion
 308             Ext.TaskManager.stop(this.waitTimer);
 309             this.waitTimer = null;
 310         }
 311     },
 312
 313     onDestroy: function(){
 314         this.clearTimer();
 315         if (this.rendered) {
 316             if (this.textEl.isComposite) {
 317                 this.textEl.clear();
 318             }
 319             Ext.destroyMembers(this, 'textEl', 'progressBar', 'textTopEl');
 320         }
 321         this.callParent();
 322     }
 323 });
 324 </pre>
 325 </body>
 326 </html>