array-grid.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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>Stateful Array 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. <!-- GC -->
  9. <script type="text/javascript" src="../../ext-all.js"></script>
  10. <!-- page specific -->
  11. <style type="text/css">
  12. /* style rows on mouseover */
  13. .x-grid-row-over .x-grid-cell-inner {
  14. font-weight: bold;
  15. }
  16. /* shared styles for the ActionColumn icons */
  17. .x-action-col-cell img {
  18. height: 16px;
  19. width: 16px;
  20. cursor: pointer;
  21. }
  22. /* custom icon for the "buy" ActionColumn icon */
  23. .x-action-col-cell img.buy-col {
  24. background-image: url(../shared/icons/fam/accept.png);
  25. }
  26. /* custom icon for the "alert" ActionColumn icon */
  27. .x-action-col-cell img.alert-col {
  28. background-image: url(../shared/icons/fam/error.png);
  29. }
  30. .x-ie6 .x-action-col-cell img.buy-col {
  31. background-image: url(../shared/icons/fam/accept.gif);
  32. }
  33. .x-ie6.x-action-col-cell img.alert-col {
  34. background-image: url(../shared/icons/fam/error.gif);
  35. }
  36. .x-ie6 .x-action-col-cell img {
  37. position:relative;
  38. top:-1px;
  39. }
  40. </style>
  41. <script type="text/javascript" src="array-grid.js"></script>
  42. </head>
  43. <body>
  44. <h1>Stateful Array Grid Example</h1>
  45. <p>This example shows how to create a grid from Array data.</p>
  46. <p>The grid is stateful so you can move or hide columns, reload the page, and come
  47. back to the grid in the same state you left it in.</p>
  48. <p>The cells are selectable due to use of the <code>enableTextSelection</code> option.</p>
  49. <p>Note that the js is not minified so it is readable. See <a href="array-grid.js">array-grid.js</a>.</p>
  50. <div id="grid-example"></div>
  51. </body>
  52. </html>