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