docs/source/ProgressBarPager.html

   1 <html>
   2 <head>
   3   <title>The source code</title>
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   6 </head>
   7 <body  onload="prettyPrint();">
   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.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
  64             }, this, {single: true});
  65
  66         }
  67
  68     },
  69         // private
  70         // This method handles the click for the progress bar
  71         handleProgressBarClick : function(e){
  72                 var parent = this.parent;
  73                 var displayItem = parent.displayItem;
  74
  75                 var box = this.progressBar.getBox();
  76                 var xy = e.getXY();
  77                 var position = xy[0]-box.x;
  78                 var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
  79
  80                 var newpage = Math.ceil(position/(displayItem.width/pages));
  81                 parent.changePage(newpage);
  82         },
  83
  84         // private, overriddes
  85         parentOverrides  : {
  86                 // private
  87                 // This method updates the information via the progress bar.
  88                 updateInfo : function(){
  89                         if(this.displayItem){
  90                                 var count   = this.store.getCount();
  91                                 var pgData  = this.getPageData();
  92                                 var pageNum = this.readPage(pgData);
  93
  94                                 var msg    = count == 0 ?
  95                                         this.emptyMsg :
  96                                         String.format(
  97                                                 this.displayMsg,
  98                                                 this.cursor+1, this.cursor+count, this.store.getTotalCount()
  99                                         );
 100
 101                                 pageNum = pgData.activePage; ;
 102
 103                                 var pct = pageNum / pgData.pages;
 104
 105                                 this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
 106                         }
 107                 }
 108         }
 109 });
 110 Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
 111
 112 </pre>
 113 </body>
 114 </html>