extjs/examples/classic/grid/buffered-store.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   7     <title>Grid with Buffered Store</title>
   8
   9     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  10
  11     <!-- GC -->
  12
  13     <script type="text/javascript" src="../shared/include-ext.js"></script>
  14     <script type="text/javascript" src="../shared/options-toolbar.js"></script>
  15
  16     <script type="text/javascript" src="buffered-store.js"></script>
  17 </head>
  18 <body>
  19     <h1>Grid with Buffered Store</h1>
  20     <p>A BufferedStore allows only a small section of a potentially very large server-side dataset to be loaded when
  21     required to be displayed, and then discarded when scrolled out of view.</p>
  22     <p>Usage of a BufferedStore causes buffered rendering of just the <b>visible</b> range of grid data.</p>
  23     <p>The "Topic" column is configured <b><code>cellWrap: true</code></b> and allows text to wrap. This causes the buffered renderer to
  24     use <b><code>variableRowHeight: true</code></b>.</p>
  25     <p>The number of rendered rows is only just larger than the visible row count. As the edge of the rendered data scrolls towards being in
  26         view, the table has new rows appended just in time, and rows removed from the receding side.</p>
  27     <p>The code is not minified, see <a href="buffered-store.js">buffered-store.js</a></p>
  28 </body>
  29 </html>