examples/ux/ProgressBarPager.js

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8 * @class Ext.ux.ProgressBarPager
   9 * @extends Object
  10 * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
  11 *
  12 * @ptype progressbarpager
  13 * @constructor
  14 * Create a new ItemSelector
  15 * @param {Object} config Configuration options
  16 * @xtype itemselector
  17 */
  18 Ext.ux.ProgressBarPager  = Ext.extend(Object, {
  19         /**
  20         * @cfg {Integer} progBarWidth
  21         * <p>The default progress bar width.  Default is 225.</p>
  22         */
  23         progBarWidth   : 225,
  24         /**
  25         * @cfg {String} defaultText
  26         * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
  27         */
  28         defaultText    : 'Loading...',
  29         /**
  30         * @cfg {Object} defaultAnimCfg
  31         * <p>A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.</p>
  32         */
  33         defaultAnimCfg : {
  34                 duration   : 1,
  35                 easing     : 'bounceOut'
  36         },
  37         constructor : function(config) {
  38                 if (config) {
  39                         Ext.apply(this, config);
  40                 }
  41         },
  42         //public
  43         init : function (parent) {
  44
  45                 if(parent.displayInfo){
  46                         this.parent = parent;
  47                         var ind  = parent.items.indexOf(parent.displayItem);
  48                         parent.remove(parent.displayItem, true);
  49                         this.progressBar = new Ext.ProgressBar({
  50                                 text    : this.defaultText,
  51                                 width   : this.progBarWidth,
  52                                 animate :  this.defaultAnimCfg
  53                         });
  54
  55                         parent.displayItem = this.progressBar;
  56
  57                         parent.add(parent.displayItem);
  58                         parent.doLayout();
  59                         Ext.apply(parent, this.parentOverrides);
  60
  61                         this.progressBar.on('render', function(pb) {
  62                                 pb.el.applyStyles('cursor:pointer');
  63
  64                                 pb.el.on('click', this.handleProgressBarClick, this);
  65                         }, this);
  66
  67
  68                         // Remove the click handler from the
  69                         this.progressBar.on({
  70                                 scope         : this,
  71                                 beforeDestroy : function() {
  72                                         this.progressBar.el.un('click', this.handleProgressBarClick, this);
  73                                 }
  74                         });
  75
  76                 }
  77
  78         },
  79         // private
  80         // This method handles the click for the progress bar
  81         handleProgressBarClick : function(e){
  82                 var parent = this.parent;
  83                 var displayItem = parent.displayItem;
  84
  85                 var box = this.progressBar.getBox();
  86                 var xy = e.getXY();
  87                 var position = xy[0]-box.x;
  88                 var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
  89
  90                 var newpage = Math.ceil(position/(displayItem.width/pages));
  91                 parent.changePage(newpage);
  92         },
  93
  94         // private, overriddes
  95         parentOverrides  : {
  96                 // private
  97                 // This method updates the information via the progress bar.
  98                 updateInfo : function(){
  99                         if(this.displayItem){
 100                                 var count   = this.store.getCount();
 101                                 var pgData  = this.getPageData();
 102                                 var pageNum = this.readPage(pgData);
 103
 104                                 var msg    = count == 0 ?
 105                                         this.emptyMsg :
 106                                         String.format(
 107                                                 this.displayMsg,
 108                                                 this.cursor+1, this.cursor+count, this.store.getTotalCount()
 109                                         );
 110
 111                                 pageNum = pgData.activePage; ;
 112
 113                                 var pct = pageNum / pgData.pages;
 114
 115                                 this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
 116                         }
 117                 }
 118         }
 119 });
 120 Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
 121