Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / 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>