X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/source/ProgressBar.html diff --git a/docs/source/ProgressBar.html b/docs/source/ProgressBar.html index b7e67d8a..b4a2c8a4 100644 --- a/docs/source/ProgressBar.html +++ b/docs/source/ProgressBar.html @@ -1,292 +1,50 @@ - - - The source code - - - - -
/** - * @class Ext.ProgressBar - * @extends Ext.BoxComponent - *

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 {@link #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 {@link #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.

- * @cfg {Float} value A floating point value between 0 and 1 (e.g., .5, defaults to 0) - * @cfg {String} text The progress bar text (defaults to '') - * @cfg {Mixed} textEl The element to render the progress text to (defaults to the progress - * bar's internal text element) - * @cfg {String} id The progress bar element's id (defaults to an auto-generated id) - * @xtype progress - */ -Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { - /** - * @cfg {String} baseCls - * The base CSS class to apply to the progress bar's wrapper element (defaults to 'x-progress') - */ - baseCls : 'x-progress', - - /** - * @cfg {Boolean} animate - * True to animate the progress bar during transitions (defaults to false) - */ - animate : false, - - // private - waitTimer : null, - - // private - initComponent : function(){ - Ext.ProgressBar.superclass.initComponent.call(this); - this.addEvents( - /** - * @event update - * Fires after each update interval - * @param {Ext.ProgressBar} this - * @param {Number} The current progress value - * @param {String} The current progress text - */ - "update" - ); - }, - - // private - onRender : function(ct, position){ - var tpl = new Ext.Template( - '
', - '
', - '
', - '
', - '
 
', - '
', - '
', - '
', - '
 
', - '
', - '
', - '
' - ); - - this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) - : tpl.append(ct, {cls: this.baseCls}, true); - - if(this.id){ - this.el.dom.id = this.id; - } - var inner = this.el.dom.firstChild; - this.progressBar = Ext.get(inner.firstChild); - - if(this.textEl){ - //use an external text el - this.textEl = Ext.get(this.textEl); - delete this.textTopEl; - }else{ - //setup our internal layered text els - this.textTopEl = Ext.get(this.progressBar.dom.firstChild); - var textBackEl = Ext.get(inner.childNodes[1]); - this.textTopEl.setStyle("z-index", 99).addClass('x-hidden'); - this.textEl = new Ext.CompositeElement([this.textTopEl.dom.firstChild, textBackEl.dom.firstChild]); - this.textEl.setWidth(inner.offsetWidth); - } - this.progressBar.setHeight(inner.offsetHeight); - }, - - // private - afterRender : function(){ - Ext.ProgressBar.superclass.afterRender.call(this); - if(this.value){ - this.updateProgress(this.value, this.text); - }else{ - this.updateText(this.text); - } - }, - - /** - * 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 {@link #reset} to clear and/or hide the control. - * @param {Float} value (optional) A floating point value between 0 and 1 (e.g., .5, defaults to 0) - * @param {String} text (optional) The string to display in the progress text element (defaults to '') - * @param {Boolean} animate (optional) Whether to animate the transition of the progress bar. If this value is - * not specified, the default for the class is used (default to false) - * @return {Ext.ProgressBar} this - */ - updateProgress : function(value, text, animate){ - this.value = value || 0; - if(text){ - this.updateText(text); - } - if(this.rendered){ - var w = Math.floor(value*this.el.dom.firstChild.offsetWidth); - this.progressBar.setWidth(w, animate === true || (animate !== false && this.animate)); - if(this.textTopEl){ - //textTopEl should be the same width as the bar so overflow will clip as the bar moves - this.textTopEl.removeClass('x-hidden').setWidth(w); - } - } - this.fireEvent('update', this, value, text); - return this; - }, - - /** - * 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 {@link #reset}. The wait method accepts a config object with - * the following properties: - *
-Property   Type          Description
----------- ------------  ----------------------------------------------------------------------
-duration   Number        The length of time in milliseconds that the progress bar should
-                         run before resetting itself (defaults to undefined, in which case it
-                         will run indefinitely until reset is called)
-interval   Number        The length of time in milliseconds between each progress update
-                         (defaults to 1000 ms)
-animate    Boolean       Whether to animate the transition of the progress bar. If this value is
-                         not specified, the default for the class is used.                                                   
-increment  Number        The number of progress update segments to display within the progress
-                         bar (defaults to 10).  If the bar reaches the end and is still
-                         updating, it will automatically wrap back to the beginning.
-text       String        Optional text to display in the progress bar element (defaults to '').
-fn         Function      A callback function to execute after the progress bar finishes auto-
-                         updating.  The function will be called with no arguments.  This function
-                         will be ignored if duration is not specified since in that case the
-                         progress bar can only be stopped programmatically, so any required function
-                         should be called by the same code after it resets the progress bar.
-scope      Object        The scope that is passed to the callback function (only applies when
-                         duration and fn are both passed).
-
- * - * Example usage: - *

-var p = new Ext.ProgressBar({
-   renderTo: 'my-el'
-});
-
-//Wait for 5 seconds, then update the status el (progress bar will auto-reset)
-p.wait({
-   interval: 100, //bar will move fast!
-   duration: 5000,
-   increment: 15,
-   text: 'Updating...',
-   scope: this,
-   fn: function(){
-      Ext.fly('status').update('Done!');
-   }
-});
-
-//Or update indefinitely until some async action completes, then reset manually
-p.wait();
-myAction.on('complete', function(){
-    p.reset();
-    Ext.fly('status').update('Done!');
-});
-
- * @param {Object} config (optional) Configuration options - * @return {Ext.ProgressBar} this - */ - wait : function(o){ - if(!this.waitTimer){ - var scope = this; - o = o || {}; - this.updateText(o.text); - this.waitTimer = Ext.TaskMgr.start({ - run: function(i){ - var inc = o.increment || 10; - this.updateProgress(((((i+inc)%inc)+1)*(100/inc))*0.01, null, o.animate); - }, - interval: o.interval || 1000, - duration: o.duration, - onStop: function(){ - if(o.fn){ - o.fn.apply(o.scope || this); - } - this.reset(); - }, - scope: scope - }); - } - return this; - }, - - /** - * Returns true if the progress bar is currently in a {@link #wait} operation - * @return {Boolean} True if waiting, else false - */ - isWaiting : function(){ - return this.waitTimer !== null; - }, - - /** - * Updates the progress bar text. If specified, textEl will be updated, otherwise the progress - * bar itself will display the updated text. - * @param {String} text (optional) The string to display in the progress text element (defaults to '') - * @return {Ext.ProgressBar} this - */ - updateText : function(text){ - this.text = text || ' '; - if(this.rendered){ - this.textEl.update(this.text); - } - return this; - }, - - /** - * Synchronizes the inner bar width to the proper proportion of the total componet width based - * on the current progress {@link #value}. This will be called automatically when the ProgressBar - * is resized by a layout, but if it is rendered auto width, this method can be called from - * another resize handler to sync the ProgressBar if necessary. - */ - syncProgressBar : function(){ - if(this.value){ - this.updateProgress(this.value, this.text); - } - return this; - }, - - /** - * Sets the size of the progress bar. - * @param {Number} width The new width in pixels - * @param {Number} height The new height in pixels - * @return {Ext.ProgressBar} this - */ - setSize : function(w, h){ - Ext.ProgressBar.superclass.setSize.call(this, w, h); - if(this.textTopEl){ - var inner = this.el.dom.firstChild; - this.textEl.setSize(inner.offsetWidth, inner.offsetHeight); - } - this.syncProgressBar(); - return this; - }, - - /** - * Resets the progress bar value to 0 and text to empty string. If hide = true, the progress - * bar will also be hidden (using the {@link #hideMode} property internally). - * @param {Boolean} hide (optional) True to hide the progress bar (defaults to false) - * @return {Ext.ProgressBar} this - */ - reset : function(hide){ - this.updateProgress(0); - if(this.textTopEl){ - this.textTopEl.addClass('x-hidden'); - } - if(this.waitTimer){ - this.waitTimer.onStop = null; //prevent recursion - Ext.TaskMgr.stop(this.waitTimer); - this.waitTimer = null; - } - if(hide === true){ - this.hide(); - } - return this; - } -}); -Ext.reg('progress', Ext.ProgressBar);
- - \ No newline at end of file + + + + + The source code + + + + + + +
/**
+ * @class Ext.layout.component.ProgressBar
+ * @extends Ext.layout.component.Component
+ * @private
+ */
+
+Ext.define('Ext.layout.component.ProgressBar', {
+
+    /* Begin Definitions */
+
+    alias: ['layout.progressbar'],
+
+    extend: 'Ext.layout.component.Component',
+
+    /* End Definitions */
+
+    type: 'progressbar',
+
+    onLayout: function(width, height) {
+        var me = this,
+            owner = me.owner,
+            textEl = owner.textEl;
+        
+        me.setElementSize(owner.el, width, height);
+        textEl.setWidth(owner.el.getWidth(true));
+        
+        me.callParent([width, height]);
+        
+        owner.updateProgress(owner.value);
+    }
+});
+ +