examples/grid/from-markup.html

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