docs/source/Chunking.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.feature.Chunking'>/**
   2 </span> * @class Ext.grid.feature.Chunking
   3  * @extends Ext.grid.feature.Feature
   4  */
   5 Ext.define('Ext.grid.feature.Chunking', {
   6     extend: 'Ext.grid.feature.Feature',
   7     alias: 'feature.chunking',
   8
   9     chunkSize: 20,
  10     rowHeight: Ext.isIE ? 27 : 26,
  11     visibleChunk: 0,
  12     hasFeatureEvent: false,
  13     attachEvents: function() {
  14         var grid = this.view.up('gridpanel'),
  15             scroller = grid.down('gridscroller[dock=right]');
  16         scroller.el.on('scroll', this.onBodyScroll, this, {buffer: 300});
  17         //this.view.on('bodyscroll', this.onBodyScroll, this, {buffer: 300});
  18     },
  19
  20     onBodyScroll: function(e, t) {
  21         var view = this.view,
  22             top  = t.scrollTop,
  23             nextChunk = Math.floor(top / this.rowHeight / this.chunkSize);
  24         if (nextChunk !== this.visibleChunk) {
  25
  26             this.visibleChunk = nextChunk;
  27             view.refresh();
  28             view.el.dom.scrollTop = top;
  29             //BrowserBug: IE6,7,8 quirks mode takes setting scrollTop 2x.
  30             view.el.dom.scrollTop = top;
  31         }
  32     },
  33
  34     collectData: function(records, preppedRecords, startIndex, fullWidth, orig) {
  35         var o = {
  36             fullWidth: orig.fullWidth,
  37             chunks: []
  38         },
  39         //headerCt = this.view.headerCt,
  40         //colums = headerCt.getColumnsForTpl(),
  41         recordCount = orig.rows.length,
  42         start = 0,
  43         i = 0,
  44         visibleChunk = this.visibleChunk,
  45         chunk,
  46         rows,
  47         chunkLength;
  48
  49         for (; start &lt; recordCount; start+=this.chunkSize, i++) {
  50             if (start+this.chunkSize &gt; recordCount) {
  51                 chunkLength = recordCount - start;
  52             } else {
  53                 chunkLength = this.chunkSize;
  54             }
  55
  56             if (i &gt;= visibleChunk - 1 &amp;&amp; i &lt;= visibleChunk + 1) {
  57                 rows = orig.rows.slice(start, start+this.chunkSize);
  58             } else {
  59                 rows = [];
  60             }
  61             o.chunks.push({
  62                 rows: rows,
  63                 fullWidth: fullWidth,
  64                 chunkHeight: chunkLength * this.rowHeight
  65             });
  66         }
  67
  68
  69         return o;
  70     },
  71
  72     getTableFragments: function() {
  73         return {
  74             openTableWrap: function() {
  75                 return '&lt;tpl for=&quot;chunks&quot;&gt;&lt;div class=&quot;' + Ext.baseCSSPrefix + 'grid-chunk&quot; style=&quot;height: {chunkHeight}px;&quot;&gt;';
  76             },
  77             closeTableWrap: function() {
  78                 return '&lt;/div&gt;&lt;/tpl&gt;';
  79             }
  80         };
  81     }
  82 });
  83 </pre></pre></body></html>