examples/grid/group-summary-grid.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.grid.*',
  17     'Ext.data.*',
  18     'Ext.form.field.Number',
  19     'Ext.form.field.Date',
  20     'Ext.tip.QuickTipManager'
  21 ]);
  22
  23 Ext.define('Task', {
  24     extend: 'Ext.data.Model',
  25     idProperty: 'taskId',
  26     fields: [
  27         {name: 'projectId', type: 'int'},
  28         {name: 'project', type: 'string'},
  29         {name: 'taskId', type: 'int'},
  30         {name: 'description', type: 'string'},
  31         {name: 'estimate', type: 'float'},
  32         {name: 'rate', type: 'float'},
  33         {name: 'cost', type: 'float'},
  34         {name: 'due', type: 'date', dateFormat:'m/d/Y'}
  35     ]
  36 });
  37
  38 var data = [
  39     {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'},
  40     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
  41     {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'},
  42     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
  43     {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'},
  44     {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'},
  45     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
  46     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
  47     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
  48     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
  49     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
  50     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
  51     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
  52     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
  53     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
  54     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
  55 ];
  56
  57 Ext.onReady(function(){
  58
  59     Ext.tip.QuickTipManager.init();
  60
  61     var store = Ext.create('Ext.data.Store', {
  62         model: 'Task',
  63         data: data,
  64         sorters: {property: 'due', direction: 'ASC'},
  65         groupField: 'project'
  66     });
  67
  68     var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
  69         clicksToEdit: 1,
  70         listeners: {
  71             edit: function(){
  72                 // refresh summaries
  73                 grid.getView().refresh();
  74             }
  75         }
  76     });
  77     var showSummary = true;
  78     var grid = Ext.create('Ext.grid.Panel', {
  79         width: 800,
  80         height: 450,
  81         frame: true,
  82         title: 'Sponsored Projects',
  83         iconCls: 'icon-grid',
  84         renderTo: document.body,
  85         store: store,
  86         plugins: [cellEditing],
  87         dockedItems: [{
  88             dock: 'top',
  89             xtype: 'toolbar',
  90             items: [{
  91                 tooltip: 'Toggle the visibility of the summary row',
  92                 text: 'Toggle Summary',
  93                 handler: function(){
  94                     var view = grid.getView();
  95                     showSummary = !showSummary;
  96                     view.getFeature('group').toggleSummaryRow(showSummary);
  97                     view.refresh();
  98                 }
  99             }]
 100         }],
 101         features: [{
 102             id: 'group',
 103             ftype: 'groupingsummary',
 104             groupHeaderTpl: '{name}',
 105             hideGroupedHeader: true,
 106             enableGroupingMenu: false
 107         }],
 108         columns: [{
 109             text: 'Task',
 110             flex: 1,
 111             tdCls: 'task',
 112             sortable: true,
 113             dataIndex: 'description',
 114             hideable: false,
 115             summaryType: 'count',
 116             summaryRenderer: function(value, summaryData, dataIndex) {
 117                 return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
 118             }
 119         }, {
 120             header: 'Project',
 121             width: 20,
 122             sortable: true,
 123             dataIndex: 'project'
 124         }, {
 125             header: 'Due Date',
 126             width: 80,
 127             sortable: true,
 128             dataIndex: 'due',
 129             summaryType: 'max',
 130             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 131             summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
 132             field: {
 133                 xtype: 'datefield'
 134             }
 135         }, {
 136             header: 'Estimate',
 137             width: 75,
 138             sortable: true,
 139             dataIndex: 'estimate',
 140             summaryType: 'sum',
 141             renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
 142                 return value + ' hours';
 143             },
 144             summaryRenderer: function(value, summaryData, dataIndex) {
 145                 return value + ' hours';
 146             },
 147             field: {
 148                 xtype: 'numberfield'
 149             }
 150         }, {
 151             header: 'Rate',
 152             width: 75,
 153             sortable: true,
 154             renderer: Ext.util.Format.usMoney,
 155             summaryRenderer: Ext.util.Format.usMoney,
 156             dataIndex: 'rate',
 157             summaryType: 'average',
 158             field: {
 159                 xtype: 'numberfield'
 160             }
 161         }, {
 162             id: 'cost',
 163             header: 'Cost',
 164             width: 75,
 165             sortable: false,
 166             groupable: false,
 167             renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
 168                 return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
 169             },
 170             dataIndex: 'cost',
 171             summaryType: function(records){
 172                 var i = 0,
 173                     length = records.length,
 174                     total = 0,
 175                     record;
 176
 177                 for (; i < length; ++i) {
 178                     record = records[i];
 179                     total += record.get('estimate') * record.get('rate');
 180                 }
 181                 return total;
 182             },
 183             summaryRenderer: Ext.util.Format.usMoney
 184         }]
 185     });
 186 });
 187