examples/grid/remote-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 ]);
  19
  20 Ext.onReady(function(){
  21     Ext.define('Task', {
  22         extend: 'Ext.data.Model',
  23         idProperty: 'taskId',
  24         fields: [
  25             {name: 'projectId', type: 'int'},
  26             {name: 'project', type: 'string'},
  27             {name: 'taskId', type: 'int'},
  28             {name: 'description', type: 'string'},
  29             {name: 'estimate', type: 'float'},
  30             {name: 'rate', type: 'float'},
  31             {name: 'cost', type: 'float'},
  32             {name: 'due', type: 'date', dateFormat:'m/d/Y'}
  33         ]
  34     });
  35
  36     var store = Ext.create('Ext.data.Store', {
  37         model: 'Task',
  38         autoLoad: true,
  39         proxy: {
  40             type: 'ajax',
  41             url: 'remote-group-summary-grid.json',
  42             reader: {
  43                 type: 'json',
  44                 root: 'data'
  45             }
  46         },
  47         sorters: {property: 'due', direction: 'ASC'},
  48         groupField: 'project'
  49     });
  50
  51     var grid = Ext.create('Ext.grid.Panel', {
  52         width: 800,
  53         height: 450,
  54         title: 'Sponsored Projects',
  55         renderTo: Ext.getBody(),
  56         store: store,
  57         viewConfig: {
  58             stripeRows: false
  59         },
  60         dockedItems: [{
  61             dock: 'top',
  62             xtype: 'toolbar',
  63             items: [{
  64                 text: 'Show Summary',
  65                 pressed: true,
  66                 enableToggle: true,
  67                 toggleHandler: function(btn, pressed){
  68                     var view = grid.getView();
  69                     view.getFeature('group').toggleSummaryRow(pressed);
  70                     view.refresh();
  71                 }
  72             }]
  73         }],
  74         features: [{
  75             id: 'group',
  76             ftype: 'groupingsummary',
  77             groupHeaderTpl: '{name}',
  78             hideGroupedHeader: true,
  79             remoteRoot: 'summaryData'
  80         }],
  81         columns: [{
  82             text: 'Task',
  83             flex: 1,
  84             sortable: true,
  85             tdCls: 'task',
  86             dataIndex: 'description',
  87             hideable: false,
  88             summaryRenderer: function(value, summaryData, dataIndex) {
  89                 return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
  90             }
  91         }, {
  92             header: 'Project',
  93             width: 20,
  94             sortable: true,
  95             dataIndex: 'project'
  96         }, {
  97             header: 'Due Date',
  98             width: 80,
  99             sortable: true,
 100             dataIndex: 'due',
 101             renderer: Ext.util.Format.dateRenderer('m/d/Y')
 102         }, {
 103             header: 'Estimate',
 104             width: 75,
 105             sortable: true,
 106             dataIndex: 'estimate',
 107             renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
 108                 return value + ' hours';
 109             },
 110             summaryRenderer: function(value, summaryData, dataIndex) {
 111                 return value + ' hours';
 112             }
 113         }, {
 114             header: 'Rate',
 115             width: 75,
 116             sortable: true,
 117             renderer: Ext.util.Format.usMoney,
 118             summaryRenderer: Ext.util.Format.usMoney,
 119             dataIndex: 'rate',
 120             summaryType: 'average'
 121         }, {
 122             id: 'cost',
 123             header: 'Cost',
 124             width: 75,
 125             sortable: false,
 126             groupable: false,
 127             renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
 128                 return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
 129             },
 130             dataIndex: 'cost',
 131             summaryRenderer: Ext.util.Format.usMoney
 132         }]
 133     });
 134 });
 135