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             tdCls: 'task',
  72             dataIndex: 'description',
  73             hideable: false,
  74             summaryRenderer: function(value, summaryData, dataIndex) {
  75                 return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
  76             }
  77         }, {
  78             header: 'Project',
  79             width: 20,
  80             sortable: true,
  81             dataIndex: 'project'
  82         }, {
  83             header: 'Due Date',
  84             width: 80,
  85             sortable: true,
  86             dataIndex: 'due',
  87             renderer: Ext.util.Format.dateRenderer('m/d/Y')
  88         }, {
  89             header: 'Estimate',
  90             width: 75,
  91             sortable: true,
  92             dataIndex: 'estimate',
  93             renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
  94                 return value + ' hours';
  95             },
  96             summaryRenderer: function(value, summaryData, dataIndex) {
  97                 return value + ' hours';
  98             }
  99         }, {
 100             header: 'Rate',
 101             width: 75,
 102             sortable: true,
 103             renderer: Ext.util.Format.usMoney,
 104             summaryRenderer: Ext.util.Format.usMoney,
 105             dataIndex: 'rate',
 106             summaryType: 'average'
 107         }, {
 108             id: 'cost',
 109             header: 'Cost',
 110             width: 75,
 111             sortable: false,
 112             groupable: false,
 113             renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
 114                 return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
 115             },
 116             dataIndex: 'cost',
 117             summaryRenderer: Ext.util.Format.usMoney
 118         }]
 119     });
 120 });