docs/source/ProgressBarPager.html

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