Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / examples / grid / transform-dom.html
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5     <title>From Markup Grid Example</title>
6     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
7     <link rel="stylesheet" type="text/css" href="../shared/example.css" />
8     <style type="text/css">
9         #the-table { 
10             border:1px solid #bbb;
11             border-collapse:collapse; 
12         }
13         #the-table td,#the-table th { 
14             border:1px solid #ccc;
15             border-collapse:collapse;
16             padding:5px; 
17         }
18     </style>
19     <script type="text/javascript" src="../../bootstrap.js"></script>
20     <script type="text/javascript" src="transform-dom.js"></script>
21 </head>
22 <body>
23     <h1>From Markup Grid Example</h1>
24     <p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
25     <p>Note that the js is not minified so it is readable. See <a href="transform-dom.js">transform-dom.js</a>.</p>
26     
27     <button id="create-grid" type="button">Create grid</button>
28     <br />
29     <br />
30     <table cellspacing="0" id="the-table">
31         <thead>
32             <tr style="background:#eeeeee;">
33                 <th>Name</th>
34                 <th style="width: 40px;">Age</th>
35                 <th>Sex</th>
36             </tr>
37         </thead>
38         <tbody>
39             <tr>
40                 <td>Barney Rubble</td>
41                 <td>32</td>
42                 <td>Male</td>
43             </tr>
44             <tr>
45                 <td>Fred Flintstone</td>
46                 <td>33</td>
47                 <td>Male</td>
48             </tr>
49             <tr>
50                 <td>Betty Rubble</td>
51                 <td>32</td>
52                 <td>Female</td>
53             </tr>
54             <tr>
55                 <td>Pebbles</td>
56                 <td>1</td>
57                 <td>Female</td>
58             </tr>
59             <tr>
60                 <td>Bamm Bamm</td>
61                 <td>2</td>
62                 <td>Male</td>
63             </tr>
64         </tbody>
65     </table>
66
67 </body>
68 </html>