examples/grid/buffer.html

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