examples/grid/from-markup.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=iso-8859-1">
   5 <title>From Markup Grid Example</title>
   6 <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   7 <!-- GC -->
   8         <!-- LIBS -->
   9         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  10         <!-- ENDLIBS -->
  11
  12         <script type="text/javascript" src="../../ext-all.js"></script>
  13
  14         <script type="text/javascript" src="../ux/TableGrid.js"></script>
  15         <script type="text/javascript" src="from-markup.js"></script>
  16         <link rel="stylesheet" type="text/css" href="grid-examples.css" />
  17         <!-- Common Styles for the examples -->
  18         <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  19         <style type="text/css">
  20         #the-table { border:1px solid #bbb;border-collapse:collapse; }
  21         #the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
  22         </style>
  23 </head>
  24 <body>
  25 <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
  26 <h1>From Markup Grid Example</h1>
  27 <p>This example shows how to create a grid with from an existing, unformatted HTML table.</p>
  28 <p>Note that the js is not minified so it is readable. See <a href="from-markup.js">from-markup.js</a>.</p>
  29 <button id="create-grid" type="button">Create grid</button>
  30 <br />
  31 <br />
  32 <table cellspacing="0" id="the-table">
  33         <thead>
  34             <tr style="background:#eeeeee;">
  35                 <th>Name</th>
  36                 <th style="width: 40px;">Age</th>
  37                 <th>Sex</th>
  38             </tr>
  39         </thead>
  40         <tbody>
  41             <tr>
  42                 <td>Barney Rubble</td>
  43                 <td>32</td>
  44                 <td>Male</td>
  45             </tr>
  46             <tr>
  47                 <td>Fred Flintstone</td>
  48                 <td>33</td>
  49                 <td>Male</td>
  50             </tr>
  51             <tr>
  52                 <td>Betty Rubble</td>
  53                 <td>32</td>
  54                 <td>Female</td>
  55             </tr>
  56             <tr>
  57                 <td>Pebbles</td>
  58                 <td>1</td>
  59                 <td>Female</td>
  60             </tr>
  61             <tr>
  62                 <td>Bamm Bamm</td>
  63                 <td>2</td>
  64                 <td>Male</td>
  65             </tr>
  66         </tbody>
  67     </table>
  68
  69 </body>
  70 </html>