-/*!
- * 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);
git.ithinksw.org / extjs.git / blobdiff