examples/grid/buffer.html

   1 <html>
   2 <head>
   3         <title>Buffer Grid Example</title>
   4         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   5         <!-- GC -->
   6         <!-- LIBS -->
   7         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
   8         <!-- ENDLIBS -->
   9
  10         <script type="text/javascript" src="../../ext-all.js"></script>
  11
  12         <script type="text/javascript" src="../ux/BufferView.js"></script>
  13         <script type="text/javascript" src="buffer.js"></script>
  14         <link rel="stylesheet" type="text/css" href="grid-examples.css" />
  15
  16         <!-- Common Styles for the examples -->
  17         <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  18         <style type="text/css">
  19         .x-grid3-td-topic b {
  20             font-family:tahoma, verdana;
  21             display:block;
  22                 overflow:hidden;
  23                 width:98%;
  24                 text-overflow:ellipsis;
  25         }
  26         .x-grid3-td-topic b i {
  27             font-weight:normal;
  28             font-style: normal;
  29             color:#000;
  30                 overflow:hidden;
  31                 text-overflow:ellipsis;
  32         }
  33         .x-grid3-td-topic .x-grid3-cell-inner {
  34             white-space: nowrap;
  35         }
  36         </style>
  37 </head>
  38 <body>
  39 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  40 <h1>Buffer Grid Example</h1>
  41 <p>This example customizes the grid view to do bufferred rendering of the cells of just the visible rows in the grid.
  42 This results in a much smaller DOM structure and substantially improves performance of resizing, forceFit, autoExpandColumn and other layout and DOM manipulation features in a large grid. The smaller DOM structure
  43 can also help to improve the overall performance of your Ext application.<br/><br/>
  44 <b>While this example works perfectly, this is completely experimental and only a subset of standard grid features are available. It might need slight customizing for your application needs.</b></p>
  45 <p>To use this example, be sure to add the following JS file:   <a href="../ux/BufferView.js">BufferView.js</a></p>
  46 <p>This grid uses a ScriptTagProxy to fetch cross-domain remote data (from the Ext forums).</p>
  47 <p>Note that the js is not minified so it is readable. See <a href="buffer.js">buffer.js</a>.</p>
  48
  49 <div id="topic-grid"></div>
  50
  51 </body>
  52 </html>