X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/ux/ProgressBarPager.js

diff --git a/examples/ux/ProgressBarPager.js b/examples/ux/ProgressBarPager.js
index c7879aea..4b812f5b 100644
--- a/examples/ux/ProgressBarPager.js
+++ b/examples/ux/ProgressBarPager.js
@@ -1,108 +1,95 @@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
 /**
 * @class Ext.ux.ProgressBarPager
-* @extends Object 
-* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
-* 
-* @ptype progressbarpager 
+* @extends Object
+* Plugin for displaying a progressbar inside of a paging toolbar instead of plain text
 * @constructor
 * Create a new ItemSelector
 * @param {Object} config Configuration options
-* @xtype itemselector 
 */
-Ext.ux.ProgressBarPager  = Ext.extend(Object, {
-	/**
- 	* @cfg {Integer} progBarWidth
- 	* <p>The default progress bar width.  Default is 225.</p>
-	*/
-	progBarWidth   : 225,
-	/**
- 	* @cfg {String} defaultText
-	* <p>The text to display while the store is loading.  Default is 'Loading...'</p>
- 	*/
-	defaultText    : 'Loading...',
-    	/**
- 	* @cfg {Object} defaultAnimCfg 
- 	* <p>A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.</p>
- 	*/
-	defaultAnimCfg : {
-		duration   : 1,
-		easing     : 'bounceOut'	
-	},												  
-	constructor : function(config) {
-		if (config) {
-			Ext.apply(this, config);
-		}
-	},
-	//public
-	init : function (parent) {
-		
-		if(parent.displayInfo){
-			this.parent = parent;
-			var ind  = parent.items.indexOf(parent.displayItem);
-			parent.remove(parent.displayItem, true);
-			this.progressBar = new Ext.ProgressBar({
-				text    : this.defaultText,
-				width   : this.progBarWidth,
-				animate :  this.defaultAnimCfg
-			});					
-		   
-			parent.displayItem = this.progressBar;
-			
-			parent.add(parent.displayItem);	
-			parent.doLayout();
-			Ext.apply(parent, this.parentOverrides);		
-			
-			this.progressBar.on('render', function(pb) {
+Ext.define('Ext.ux.ProgressBarPager', {
+    extend: 'Object',
+
+    requires: ['Ext.ProgressBar'],
+    /**
+     * @cfg {Integer} width
+     * <p>The default progress bar width.  Default is 225.</p>
+    */
+    width   : 225,
+    /**
+     * @cfg {String} defaultText
+    * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
+     */
+    defaultText    : 'Loading...',
+    /**
+     * @cfg {Object} defaultAnimCfg
+     * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
+     */
+    constructor : function(config) {
+        if (config) {
+            Ext.apply(this, config);
+        }
+    },
+    //public
+    init : function (parent) {
+        var displayItem;
+        if(parent.displayInfo) {
+            this.parent = parent;
+
+            displayItem = parent.child("#displayItem");
+            if (displayItem) {
+                parent.remove(displayItem, true);
+            }
+
+            this.progressBar = Ext.create('Ext.ProgressBar', {
+                text    : this.defaultText,
+                width   : this.width,
+                animate : this.defaultAnimCfg
+            });
+
+            parent.displayItem = this.progressBar;
+
+            parent.add(parent.displayItem);
+            parent.doLayout();
+            Ext.apply(parent, this.parentOverrides);
+
+            this.progressBar.on('render', function(pb) {
                 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
             }, this, {single: true});
-						
-		}
-		  
-	},
-	// private
-	// This method handles the click for the progress bar
-	handleProgressBarClick : function(e){
-		var parent = this.parent,
-		    displayItem = parent.displayItem,
-		    box = this.progressBar.getBox(),
-		    xy = e.getXY(),
-		    position = xy[0]-box.x,
-		    pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
-		    newpage = Math.ceil(position/(displayItem.width/pages));
-            
-		parent.changePage(newpage);
-	},
-	
-	// private, overriddes
-	parentOverrides  : {
-		// private
-		// This method updates the information via the progress bar.
-		updateInfo : function(){
-			if(this.displayItem){
-				var count = this.store.getCount(),
-				    pgData = this.getPageData(),
-				    pageNum = this.readPage(pgData),
-				    msg = count == 0 ?
-					this.emptyMsg :
-					String.format(
-						this.displayMsg,
-						this.cursor+1, this.cursor+count, this.store.getTotalCount()
-					);
-					
-				pageNum = pgData.activePage; ;	
-				
-				var pct	= pageNum / pgData.pages;	
-				
-				this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
-			}
-		}
-	}
+        }
+    },
+    // private
+    // This method handles the click for the progress bar
+    handleProgressBarClick : function(e){
+        var parent = this.parent,
+            displayItem = parent.displayItem,
+            box = this.progressBar.getBox(),
+            xy = e.getXY(),
+            position = xy[0]- box.x,
+            pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
+            newpage = Math.ceil(position/(displayItem.width/pages));
+
+        parent.store.loadPage(newpage);
+    },
+
+    // private, overriddes
+    parentOverrides  : {
+        // private
+        // This method updates the information via the progress bar.
+        updateInfo : function(){
+            if(this.displayItem){
+                var count = this.store.getCount(),
+                    pageData = this.getPageData(),
+                    message = count === 0 ?
+                    this.emptyMsg :
+                    Ext.String.format(
+                        this.displayMsg,
+                        pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
+                    ),
+                    percentage = pageData.currentPage / pageData.pageCount;
+
+                this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
+            }
+        }
+    }
 });
-Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);