Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>