examples/ux/ProgressBarPager.js

   1 /**
   2 * @class Ext.ux.ProgressBarPager
   3 * @extends Object
   4 * Plugin for displaying a progressbar inside of a paging toolbar instead of plain text
   5 * @constructor
   6 * Create a new ItemSelector
   7 * @param {Object} config Configuration options
   8 */
   9 Ext.define('Ext.ux.ProgressBarPager', {
  10     extend: 'Object',
  11
  12     requires: ['Ext.ProgressBar'],
  13     /**
  14      * @cfg {Integer} width
  15      * <p>The default progress bar width.  Default is 225.</p>
  16     */
  17     width   : 225,
  18     /**
  19      * @cfg {String} defaultText
  20     * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
  21      */
  22     defaultText    : 'Loading...',
  23     /**
  24      * @cfg {Object} defaultAnimCfg
  25      * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
  26      */
  27     constructor : function(config) {
  28         if (config) {
  29             Ext.apply(this, config);
  30         }
  31     },
  32     //public
  33     init : function (parent) {
  34         var displayItem;
  35         if(parent.displayInfo) {
  36             this.parent = parent;
  37
  38             displayItem = parent.child("#displayItem");
  39             if (displayItem) {
  40                 parent.remove(displayItem, true);
  41             }
  42
  43             this.progressBar = Ext.create('Ext.ProgressBar', {
  44                 text    : this.defaultText,
  45                 width   : this.width,
  46                 animate : this.defaultAnimCfg
  47             });
  48
  49             parent.displayItem = this.progressBar;
  50
  51             parent.add(parent.displayItem);
  52             parent.doLayout();
  53             Ext.apply(parent, this.parentOverrides);
  54
  55             this.progressBar.on('render', function(pb) {
  56                 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
  57             }, this, {single: true});
  58         }
  59     },
  60     // private
  61     // This method handles the click for the progress bar
  62     handleProgressBarClick : function(e){
  63         var parent = this.parent,
  64             displayItem = parent.displayItem,
  65             box = this.progressBar.getBox(),
  66             xy = e.getXY(),
  67             position = xy[0]- box.x,
  68             pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
  69             newpage = Math.ceil(position/(displayItem.width/pages));
  70
  71         parent.store.loadPage(newpage);
  72     },
  73
  74     // private, overriddes
  75     parentOverrides  : {
  76         // private
  77         // This method updates the information via the progress bar.
  78         updateInfo : function(){
  79             if(this.displayItem){
  80                 var count = this.store.getCount(),
  81                     pageData = this.getPageData(),
  82                     message = count === 0 ?
  83                     this.emptyMsg :
  84                     Ext.String.format(
  85                         this.displayMsg,
  86                         pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
  87                     ),
  88                     percentage = pageData.currentPage / pageData.pageCount;
  89
  90                 this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
  91             }
  92         }
  93     }
  94 });
  95