examples/grid/totals-hybrid.js

   1 /*!
   2  * Ext JS Library 3.2.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     Ext.QuickTips.init();
  10
  11     var xg = Ext.grid;
  12
  13     var reader = new Ext.data.JsonReader({
  14         idProperty:'taskId',
  15         fields: [
  16             {name: 'projectId', type: 'int'},
  17             {name: 'project', type: 'string'},
  18             {name: 'taskId', type: 'int'},
  19             {name: 'description', type: 'string'},
  20             {name: 'estimate', type: 'float'},
  21             {name: 'rate', type: 'float'},
  22             {name: 'cost', type: 'float'},
  23             {name: 'due', type: 'date', dateFormat:'m/d/Y'}
  24         ],
  25                 // additional configuration for remote
  26         root:'data',
  27         remoteGroup:true,
  28         remoteSort: true
  29     });
  30
  31     // define a custom summary function
  32     Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
  33         return v + (record.data.estimate * record.data.rate);
  34     };
  35
  36         // utilize custom extension for Hybrid Summary
  37     var summary = new Ext.ux.grid.HybridSummary();
  38
  39     var grid = new xg.EditorGridPanel({
  40         ds: new Ext.data.GroupingStore({
  41             reader: reader,
  42                         // use remote data
  43             proxy : new Ext.data.HttpProxy({
  44                 url: 'totals-hybrid.json',
  45                 method: 'GET'
  46             }),
  47             sortInfo: {field: 'due', direction: 'ASC'},
  48             groupField: 'project'
  49         }),
  50
  51         columns: [
  52             {
  53                 id: 'description',
  54                 header: 'Task',
  55                 width: 80,
  56                 sortable: true,
  57                 dataIndex: 'description',
  58                 summaryType: 'count',
  59                 hideable: false,
  60                 summaryRenderer: function(v, params, data){
  61                     return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
  62                 },
  63                 editor: new Ext.form.TextField({
  64                    allowBlank: false
  65                 })
  66             },{
  67                 header: 'Project',
  68                 width: 20,
  69                 sortable: true,
  70                 dataIndex: 'project'
  71             },{
  72                 header: 'Due Date',
  73                 width: 25,
  74                 sortable: true,
  75                 dataIndex: 'due',
  76                 summaryType:'max',
  77                 renderer: Ext.util.Format.dateRenderer('m/d/Y'),
  78                 editor: new Ext.form.DateField({
  79                     format: 'm/d/Y'
  80                 })
  81             },{
  82                 header: 'Estimate',
  83                 width: 20,
  84                 sortable: true,
  85                 dataIndex: 'estimate',
  86                 summaryType:'sum',
  87                 renderer : function(v){
  88                     return v +' hours';
  89                 },
  90                 editor: new Ext.form.NumberField({
  91                    allowBlank: false,
  92                    allowNegative: false,
  93                     style: 'text-align:left'
  94                 })
  95             },{
  96                 header: 'Rate',
  97                 width: 20,
  98                 sortable: true,
  99                 renderer: Ext.util.Format.usMoney,
 100                 dataIndex: 'rate',
 101                 summaryType:'average',
 102                 editor: new Ext.form.NumberField({
 103                     allowBlank: false,
 104                     allowNegative: false,
 105                     style: 'text-align:left'
 106                 })
 107             },{
 108                 id: 'cost',
 109                 header: 'Cost',
 110                 width: 20,
 111                 sortable: false,
 112                 groupable: false,
 113                 renderer: function(v, params, record){
 114                     return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
 115                 },
 116                 dataIndex: 'cost',
 117                 summaryType: 'totalCost',
 118                 summaryRenderer: Ext.util.Format.usMoney
 119             }
 120         ],
 121
 122         view: new Ext.grid.GroupingView({
 123             forceFit:true,
 124             showGroupName: false,
 125             enableNoGroups:false,
 126                         enableGroupingMenu:false,
 127             hideGroupedColumn: true
 128         }),
 129
 130         plugins: summary,
 131
 132         tbar : [{
 133             text: 'Toggle',
 134             tooltip: 'Toggle the visibility of summary row',
 135             handler: function(){summary.toggleSummaries();}
 136         }],
 137
 138         frame: true,
 139         width: 800,
 140         height: 450,
 141         clicksToEdit: 1,
 142         collapsible: true,
 143         animCollapse: false,
 144         trackMouseOver: false,
 145         //enableColumnMove: false,
 146         title: 'Sponsored Projects',
 147         iconCls: 'icon-grid',
 148         renderTo: document.body
 149     });
 150
 151     grid.on('afteredit', function(){
 152         var groupValue = 'Ext Forms: Field Anchoring';
 153         summary.showSummaryMsg(groupValue, 'Updating Summary...');
 154         setTimeout(function(){ // simulate server call
 155             // HybridSummary class implements updateSummaryData
 156             summary.updateSummaryData(groupValue,
 157                 // create data object based on configured dataIndex
 158                 {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
 159         }, 2000);
 160     });
 161
 162         // load the remote data
 163     grid.store.load();
 164
 165 });