grouping.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. /*
  2. * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
  3. *
  4. * http://extjs.com/license
  5. */
  6. Ext.onReady(function() {
  7. Ext.QuickTips.init();
  8. var xg = Ext.grid;
  9. // shared reader
  10. var reader = new Ext.data.ArrayReader({}, [{
  11. name : 'company'
  12. }, {
  13. name : 'price',
  14. type : 'float'
  15. }, {
  16. name : 'change',
  17. type : 'float'
  18. }, {
  19. name : 'pctChange',
  20. type : 'float'
  21. }, {
  22. name : 'lastChange',
  23. type : 'date',
  24. dateFormat : 'n/j h:ia'
  25. }, {
  26. name : 'industry'
  27. }, {
  28. name : 'desc'
  29. }]);
  30. var grid = new xg.GridPanel({
  31. store : new Ext.data.GroupingStore({
  32. reader : reader,
  33. data : xg.dummyData,
  34. sortInfo : {
  35. field : 'company',
  36. direction : "ASC"
  37. },
  38. groupField : 'industry'
  39. }),
  40. columns : [{
  41. id : 'company',
  42. header : "Company",
  43. width : 60,
  44. sortable : true,
  45. dataIndex : 'company'
  46. }, {
  47. header : "Price",
  48. width : 20,
  49. sortable : true,
  50. renderer : Ext.util.Format.usMoney,
  51. dataIndex : 'price'
  52. }, {
  53. header : "Change",
  54. width : 20,
  55. sortable : true,
  56. dataIndex : 'change',
  57. renderer : Ext.util.Format.usMoney
  58. }, {
  59. header : "Industry",
  60. width : 20,
  61. sortable : true,
  62. dataIndex : 'industry'
  63. }, {
  64. header : "Last Updated",
  65. width : 20,
  66. sortable : true,
  67. renderer : Ext.util.Format.dateRenderer('m/d/Y'),
  68. dataIndex : 'lastChange'
  69. }],
  70. view : new Ext.grid.GroupingView({
  71. forceFit : true,
  72. groupTextTpl : '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
  73. }),
  74. frame : true,
  75. width : 700,
  76. height : 450,
  77. collapsible : true,
  78. animCollapse : false,
  79. title : 'Grouping Example',
  80. iconCls : 'icon-grid',
  81. renderTo : document.body
  82. });
  83. });
  84. // Array data for the grids
  85. Ext.grid.dummyData = [
  86. ['3m Co', 71.72, 0.02, 0.03, '4/2 12:00am', 'Manufacturing'],
  87. ['Alcoa Inc', 29.01, 0.42, 1.47, '4/1 12:00am', 'Manufacturing'],
  88. ['Altria Group Inc', 83.81, 0.28, 0.34, '4/3 12:00am', 'Manufacturing'],
  89. ['American Express Company', 52.55, 0.01, 0.02, '4/8 12:00am',
  90. 'Finance'],
  91. ['American International Group, Inc.', 64.13, 0.31, 0.49,
  92. '4/1 12:00am', 'Services'],
  93. ['AT&T Inc.', 31.61, -0.48, -1.54, '4/8 12:00am', 'Services'],
  94. ['Boeing Co.', 75.43, 0.53, 0.71, '4/8 12:00am', 'Manufacturing'],
  95. ['Caterpillar Inc.', 67.27, 0.92, 1.39, '4/1 12:00am', 'Services'],
  96. ['Citigroup, Inc.', 49.37, 0.02, 0.04, '4/4 12:00am', 'Finance'],
  97. ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28,
  98. '4/1 12:00am', 'Manufacturing'],
  99. ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '4/3 12:00am', 'Manufacturing'],
  100. ['General Electric Company', 34.14, -0.08, -0.23, '4/3 12:00am',
  101. 'Manufacturing'],
  102. ['General Motors Corporation', 30.27, 1.09, 3.74, '4/3 12:00am',
  103. 'Automotive'],
  104. ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '4/3 12:00am', 'Computer'],
  105. ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '4/3 12:00am',
  106. 'Manufacturing'],
  107. ['Intel Corporation', 19.88, 0.31, 1.58, '4/2 12:00am', 'Computer'],
  108. ['International Business Machines', 81.41, 0.44, 0.54, '4/1 12:00am',
  109. 'Computer'],
  110. ['Johnson & Johnson', 64.72, 0.06, 0.09, '4/2 12:00am', 'Medical'],
  111. ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '4/2 12:00am', 'Finance'],
  112. ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '4/2 12:00am', 'Food'],
  113. ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '4/2 12:00am', 'Medical'],
  114. ['Microsoft Corporation', 25.84, 0.14, 0.54, '4/2 12:00am', 'Computer'],
  115. ['Pfizer Inc', 27.96, 0.4, 1.45, '4/8 12:00am', 'Services', 'Medical'],
  116. ['The Coca-Cola Company', 45.07, 0.26, 0.58, '4/1 12:00am', 'Food'],
  117. ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '4/8 12:00am', 'Retail'],
  118. ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '4/1 12:00am',
  119. 'Manufacturing'],
  120. ['United Technologies Corporation', 63.26, 0.55, 0.88, '4/1 12:00am',
  121. 'Computer'],
  122. ['Verizon Communications', 35.57, 0.39, 1.11, '4/3 12:00am', 'Services'],
  123. ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '4/3 12:00am', 'Retail'],
  124. ['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81,
  125. '4/1 12:00am', 'Services']];
  126. // add in some dummy descriptions
  127. for (var i = 0; i < Ext.grid.dummyData.length; i++) {
  128. // Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer
  129. // adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget,
  130. // dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales
  131. // non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada,
  132. // libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus.
  133. // In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus
  134. // a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam
  135. // vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu,
  136. // adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare
  137. // sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec
  138. // urna. Curabitur velit.');
  139. }