Chunking.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  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> *
  20. */
  21. Ext.define('Ext.grid.feature.Chunking', {
  22. extend: 'Ext.grid.feature.Feature',
  23. alias: 'feature.chunking',
  24. chunkSize: 20,
  25. rowHeight: Ext.isIE ? 27 : 26,
  26. visibleChunk: 0,
  27. hasFeatureEvent: false,
  28. attachEvents: function() {
  29. this.view.el.on('scroll', this.onBodyScroll, this, {buffer: 300});
  30. },
  31. onBodyScroll: function(e, t) {
  32. var view = this.view,
  33. top = t.scrollTop,
  34. nextChunk = Math.floor(top / this.rowHeight / this.chunkSize);
  35. if (nextChunk !== this.visibleChunk) {
  36. this.visibleChunk = nextChunk;
  37. view.refresh();
  38. view.el.dom.scrollTop = top;
  39. //BrowserBug: IE6,7,8 quirks mode takes setting scrollTop 2x.
  40. view.el.dom.scrollTop = top;
  41. }
  42. },
  43. collectData: function(records, preppedRecords, startIndex, fullWidth, o) {
  44. //headerCt = this.view.headerCt,
  45. //colums = headerCt.getColumnsForTpl(),
  46. var me = this,
  47. recordCount = o.rows.length,
  48. start = 0,
  49. i = 0,
  50. visibleChunk = me.visibleChunk,
  51. rows,
  52. chunkLength,
  53. origRows = o.rows;
  54. delete o.rows;
  55. o.chunks = [];
  56. for (; start &lt; recordCount; start += me.chunkSize, i++) {
  57. if (start + me.chunkSize &gt; recordCount) {
  58. chunkLength = recordCount - start;
  59. } else {
  60. chunkLength = me.chunkSize;
  61. }
  62. if (i &gt;= visibleChunk - 1 &amp;&amp; i &lt;= visibleChunk + 1) {
  63. rows = origRows.slice(start, start + me.chunkSize);
  64. } else {
  65. rows = [];
  66. }
  67. o.chunks.push({
  68. rows: rows,
  69. fullWidth: fullWidth,
  70. chunkHeight: chunkLength * me.rowHeight
  71. });
  72. }
  73. return o;
  74. },
  75. getTableFragments: function() {
  76. return {
  77. openTableWrap: function() {
  78. return '&lt;tpl for=&quot;chunks&quot;&gt;&lt;div class=&quot;' + Ext.baseCSSPrefix + 'grid-chunk&quot; style=&quot;height: {chunkHeight}px;&quot;&gt;';
  79. },
  80. closeTableWrap: function() {
  81. return '&lt;/div&gt;&lt;/tpl&gt;';
  82. }
  83. };
  84. }
  85. });
  86. </pre>
  87. </body>
  88. </html>