docs/source/Chunking.html

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