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>