examples/docs/source/ProgressBarPager.html

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