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.Loader.setConfig({ enabled: true });
  16 Ext.Loader.setPath('Ext.ux', '../ux');
  17
  18 Ext.require([
  19     'Ext.grid.*',
  20     'Ext.data.*',
  21     'Ext.ux.ajax.SimManager'
  22 ]);
  23
  24 Ext.define('Task', {
  25     extend: 'Ext.data.Model',
  26     idProperty: 'taskId',
  27     fields: [
  28         {name: 'projectId', type: 'int'},
  29         {name: 'project', type: 'string'},
  30         {name: 'taskId', type: 'int'},
  31         {name: 'description', type: 'string'},
  32         {name: 'estimate', type: 'float'},
  33         {name: 'rate', type: 'float'},
  34         {name: 'cost', type: 'float'},
  35         {name: 'due', type: 'date', dateFormat:'m/d/Y'}
  36     ]
  37 });
  38
  39 Ext.onReady(function(){
  40     initAjaxSim();
  41
  42     var store = Ext.create('Ext.data.Store', {
  43         model: 'Task',
  44         autoLoad: true,
  45         remoteSort: true,
  46         remoteGroup: true,
  47         proxy: {
  48             type: 'ajax',
  49             //url: 'remote-group-summary-grid.json',
  50             url: 'remote-group-summary-data',
  51             reader: {
  52                 type: 'json',
  53                 root: 'data'
  54             }
  55         },
  56         sorters: {property: 'due', direction: 'ASC'},
  57         groupField: 'project'
  58     });
  59
  60     var grid = Ext.create('Ext.grid.Panel', {
  61         width: 800,
  62         height: 450,
  63         title: 'Sponsored Projects',
  64         renderTo: Ext.getBody(),
  65         store: store,
  66         viewConfig: {
  67             stripeRows: false
  68         },
  69         dockedItems: [{
  70             dock: 'top',
  71             xtype: 'toolbar',
  72             items: [{
  73                 text: 'Show Summary',
  74                 pressed: true,
  75                 enableToggle: true,
  76                 toggleHandler: function(btn, pressed){
  77                     var view = grid.getView();
  78                     view.getFeature('group').toggleSummaryRow(pressed);
  79                     view.refresh();
  80                 }
  81             }]
  82         }],
  83         features: [{
  84             id: 'group',
  85             ftype: 'groupingsummary',
  86             groupHeaderTpl: '{name}',
  87             hideGroupedHeader: true,
  88             remoteRoot: 'summaryData'
  89         }],
  90         columns: [{
  91             text: 'Task',
  92             flex: 1,
  93             sortable: true,
  94             tdCls: 'task',
  95             dataIndex: 'description',
  96             hideable: false,
  97             summaryRenderer: function(value, summaryData, dataIndex) {
  98                 return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
  99             }
 100         }, {
 101             header: 'Project',
 102             width: 20,
 103             sortable: true,
 104             dataIndex: 'project'
 105         }, {
 106             header: 'Due Date',
 107             width: 80,
 108             sortable: true,
 109             dataIndex: 'due',
 110             renderer: Ext.util.Format.dateRenderer('m/d/Y')
 111         }, {
 112             header: 'Estimate',
 113             width: 75,
 114             sortable: true,
 115             dataIndex: 'estimate',
 116             renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
 117                 return value + ' hours';
 118             },
 119             summaryRenderer: function(value, summaryData, dataIndex) {
 120                 return value + ' hours';
 121             }
 122         }, {
 123             header: 'Rate',
 124             width: 75,
 125             sortable: true,
 126             renderer: Ext.util.Format.usMoney,
 127             summaryRenderer: Ext.util.Format.usMoney,
 128             dataIndex: 'rate',
 129             summaryType: 'average'
 130         }, {
 131             id: 'cost',
 132             header: 'Cost',
 133             width: 75,
 134             sortable: false,
 135             groupable: false,
 136             renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
 137                 return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
 138             },
 139             dataIndex: 'cost',
 140             summaryRenderer: Ext.util.Format.usMoney
 141         }]
 142     });
 143 });
 144
 145 /*
 146  * Setup our faux Ajax response "simlet".
 147  */
 148 function initAjaxSim () {
 149     Ext.ux.ajax.SimManager.register({
 150         'remote-group-summary-data' : {
 151             stype: 'json',
 152
 153             data: [
 154                 {projectId: 100, project: 'Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
 155                 {projectId: 100, project: 'Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
 156                 {projectId: 100, project: 'Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
 157                 {projectId: 100, project: 'Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
 158                 {projectId: 101, project: 'Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
 159                 {projectId: 101, project: 'Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
 160                 {projectId: 101, project: 'Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
 161                 {projectId: 101, project: 'Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
 162                 {projectId: 101, project: 'Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
 163                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
 164                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
 165                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
 166                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
 167                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
 168                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
 169                 {projectId: 102, project: 'Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
 170             ],
 171
 172             getGroupSummary: function (groupField, rows, ctx) {
 173                 var ret = Ext.apply({}, rows[0]);
 174                 ret.cost = 0;
 175                 ret.estimate = 0;
 176                 Ext.each(rows, function (row) {
 177                     ret.estimate += row.estimate;
 178                     ret.cost += row.estimate * row.rate;
 179                 });
 180                 ret.estimate *= -1;
 181                 ret.cost *= -1;
 182                 return ret;
 183             }
 184         }
 185     });
 186 }
 187