remote-group-summary-grid.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Remote Summary Grid Example</title>
  5. <!-- Ext -->
  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. <!--
  11. This script intercepts ajax and provides canned data in response:
  12. -->
  13. <script type="text/javascript" src="remote-group-summary-grid-simjax.js"></script>
  14. <!--
  15. This code would otherwise make real ajax requests to the server:
  16. -->
  17. <script type="text/javascript" src="remote-group-summary-grid.js"></script>
  18. <style type="text/css">
  19. .task .x-grid-cell-inner {
  20. padding-left: 15px;
  21. }
  22. .x-grid-row-summary {
  23. color:#333;
  24. background: #f1f2f4;
  25. }
  26. .x-grid-row-summary .x-grid-cell-inner {
  27. font-weight: bold;
  28. font-size: 11px;
  29. padding-bottom: 4px;
  30. }
  31. .x-grid-hide-summary .x-grid-row-summary {
  32. display:none;
  33. }
  34. .x-grid-row .x-grid-cell-cost {
  35. background-color:#f1f2f4;
  36. }
  37. .x-grid-row-summary .x-grid-cell-cost {
  38. background-color:#e1e2e4;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <h1>Remote Summary Grid Example Example</h1>
  44. <p>This example demonstrates the use of the GroupingSummaryFeature with server-side summary
  45. calculation (results are intentionally wrong).</p>
  46. <p>This page also illustrates how to use Ajax simulation instead of a live server.</p>
  47. <p>Note that the js is not minified so it is readable. See
  48. <a href="remote-group-summary-grid.js">remote-group-summary-grid.js</a> and
  49. <a href="remote-group-summary-grid-simjax.js">remote-group-summary-grid-simjax.js</a>.</p>
  50. </body>
  51. </html>