from-markup.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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. <script type="text/javascript" src="../../ext-all.js"></script>
  12. <script type="text/javascript" src="from-markup.js"></script>
  13. <link rel="stylesheet" type="text/css" href="grid-examples.css" />
  14. <!-- Common Styles for the examples -->
  15. <link rel="stylesheet" type="text/css" href="../examples.css" />
  16. <style type="text/css">
  17. #the-table { border:1px solid #bbb;border-collapse:collapse; }
  18. #the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
  19. </style>
  20. </head>
  21. <body>
  22. <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
  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="from-markup.js">from-markup.js</a>.</p>
  26. <button id="create-grid" type="button">Create grid</button>
  27. <br />
  28. <br />
  29. <table cellspacing="0" id="the-table">
  30. <thead>
  31. <tr style="background:#eeeeee;">
  32. <th>Name</th>
  33. <th>Age</th>
  34. <th>Sex</th>
  35. </tr>
  36. </thead>
  37. <tbody>
  38. <tr>
  39. <td>Barney Rubble</td>
  40. <td>32</td>
  41. <td>Male</td>
  42. </tr>
  43. <tr>
  44. <td>Fred Flintstone</td>
  45. <td>33</td>
  46. <td>Male</td>
  47. </tr>
  48. <tr>
  49. <td>Betty Rubble</td>
  50. <td>32</td>
  51. <td>Female</td>
  52. </tr>
  53. <tr>
  54. <td>Pebbles</td>
  55. <td>1</td>
  56. <td>Female</td>
  57. </tr>
  58. <tr>
  59. <td>Bamm Bamm</td>
  60. <td>2</td>
  61. <td>Male</td>
  62. </tr>
  63. </tbody>
  64. </table>
  65. </body>
  66. </html>