examples/grid/remote-group-summary-grid.js

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