examples/grid/group-summary-grid.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.data.*',
   4     'Ext.form.field.Number',
   5     'Ext.form.field.Date',
   6     'Ext.tip.QuickTipManager'
   7 ]);
   8
   9 Ext.define('Task', {
  10     extend: 'Ext.data.Model',
  11     idProperty: 'taskId',
  12     fields: [
  13         {name: 'projectId', type: 'int'},
  14         {name: 'project', type: 'string'},
  15         {name: 'taskId', type: 'int'},
  16         {name: 'description', type: 'string'},
  17         {name: 'estimate', type: 'float'},
  18         {name: 'rate', type: 'float'},
  19         {name: 'cost', type: 'float'},
  20         {name: 'due', type: 'date', dateFormat:'m/d/Y'}
  21     ]
  22 });
  23
  24 var data = [
  25     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
  26     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
  27     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
  28     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
  29     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
  30     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
  31     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
  32     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
  33     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
  34     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
  35     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
  36     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
  37     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
  38     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
  39     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
  40     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
  41 ];
  42
  43 Ext.onReady(function(){
  44
  45     Ext.tip.QuickTipManager.init();
  46
  47     var store = Ext.create('Ext.data.Store', {
  48         model: 'Task',
  49         data: data,
  50         sorters: {property: 'due', direction: 'ASC'},
  51         groupField: 'project'
  52     });
  53
  54     var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
  55         clicksToEdit: 1,
  56         listeners: {
  57             edit: function(){
  58                 // refresh summaries
  59                 grid.getView().refresh();
  60             }
  61         }
  62     });
  63     var showSummary = true;
  64     var grid = Ext.create('Ext.grid.Panel', {
  65         width: 800,
  66         height: 450,
  67         frame: true,
  68         title: 'Sponsored Projects',
  69         iconCls: 'icon-grid',
  70         renderTo: document.body,
  71         store: store,
  72         plugins: [cellEditing],
  73         dockedItems: [{
  74             dock: 'top',
  75             xtype: 'toolbar',
  76             items: [{
  77                 tooltip: 'Toggle the visibility of the summary row',
  78                 text: 'Toggle Summary',
  79                 handler: function(){
  80                     var view = grid.getView();
  81                     showSummary = !showSummary;
  82                     view.getFeature('group').toggleSummaryRow(showSummary);
  83                     view.refresh();
  84                 }
  85             }]
  86         }],
  87         features: [{
  88             id: 'group',
  89             ftype: 'groupingsummary',
  90             groupHeaderTpl: '{name}',
  91             hideGroupedHeader: true,
  92             enableGroupingMenu: false
  93         }],
  94         columns: [{
  95             text: 'Task',
  96             flex: 1,
  97             tdCls: 'task',
  98             sortable: true,
  99             dataIndex: 'description',
 100             hideable: false,
 101             summaryType: 'count',
 102             summaryRenderer: function(value, summaryData, dataIndex) {
 103                 return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
 104             }
 105         }, {
 106             header: 'Project',
 107             width: 20,
 108             sortable: true,
 109             dataIndex: 'project'
 110         }, {
 111             header: 'Due Date',
 112             width: 80,
 113             sortable: true,
 114             dataIndex: 'due',
 115             summaryType: 'max',
 116             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 117             summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
 118             field: {
 119                 xtype: 'datefield'
 120             }
 121         }, {
 122             header: 'Estimate',
 123             width: 75,
 124             sortable: true,
 125             dataIndex: 'estimate',
 126             summaryType: 'sum',
 127             renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
 128                 return value + ' hours';
 129             },
 130             summaryRenderer: function(value, summaryData, dataIndex) {
 131                 return value + ' hours';
 132             },
 133             field: {
 134                 xtype: 'numberfield'
 135             }
 136         }, {
 137             header: 'Rate',
 138             width: 75,
 139             sortable: true,
 140             renderer: Ext.util.Format.usMoney,
 141             summaryRenderer: Ext.util.Format.usMoney,
 142             dataIndex: 'rate',
 143             summaryType: 'average',
 144             field: {
 145                 xtype: 'numberfield'
 146             }
 147         }, {
 148             id: 'cost',
 149             header: 'Cost',
 150             width: 75,
 151             sortable: false,
 152             groupable: false,
 153             renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
 154                 return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
 155             },
 156             dataIndex: 'cost',
 157             summaryType: function(records){
 158                 var i = 0,
 159                     length = records.length,
 160                     total = 0,
 161                     record;
 162
 163                 for (; i < length; ++i) {
 164                     record = records[i];
 165                     total += record.get('estimate') * record.get('rate');
 166                 }
 167                 return total;
 168             },
 169             summaryRenderer: Ext.util.Format.usMoney
 170         }]
 171     });
 172 });