examples/grid/totals.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
  26     });
  27
  28     // define a custom summary function
  29     Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
  30         return v + (record.data.estimate * record.data.rate);
  31     };
  32
  33         // utilize custom extension for Group Summary
  34     var summary = new Ext.ux.grid.GroupSummary();
  35
  36     var grid = new xg.EditorGridPanel({
  37         ds: new Ext.data.GroupingStore({
  38             reader: reader,
  39                         // use local data
  40             data: app.grid.dummyData,
  41             sortInfo: {field: 'due', direction: 'ASC'},
  42             groupField: 'project'
  43         }),
  44         columns: [
  45             {
  46                 id: 'description',
  47                 header: 'Task',
  48                 width: 80,
  49                 sortable: true,
  50                 dataIndex: 'description',
  51                 summaryType: 'count',
  52                 hideable: false,
  53                 summaryRenderer: function(v, params, data){
  54                     return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
  55                 },
  56                 editor: new Ext.form.TextField({
  57                    allowBlank: false
  58                 })
  59             },{
  60                 header: 'Project',
  61                 width: 20,
  62                 sortable: true,
  63                 dataIndex: 'project'
  64             },{
  65                 header: 'Due Date',
  66                 width: 25,
  67                 sortable: true,
  68                 dataIndex: 'due',
  69                 summaryType: 'max',
  70                 renderer: Ext.util.Format.dateRenderer('m/d/Y'),
  71                 editor: new Ext.form.DateField({
  72                     format: 'm/d/Y'
  73                 })
  74             },{
  75                 header: 'Estimate',
  76                 width: 20,
  77                 sortable: true,
  78                 dataIndex: 'estimate',
  79                 summaryType: 'sum',
  80                 renderer : function(v){
  81                     return v +' hours';
  82                 },
  83                 editor: new Ext.form.NumberField({
  84                    allowBlank: false,
  85                    allowNegative: false,
  86                    style: 'text-align:left'
  87                 })
  88             },{
  89                 header: 'Rate',
  90                 width: 20,
  91                 sortable: true,
  92                 renderer: Ext.util.Format.usMoney,
  93                 dataIndex: 'rate',
  94                 summaryType: 'average',
  95                 editor: new Ext.form.NumberField({
  96                     allowBlank: false,
  97                     allowNegative: false,
  98                     style: 'text-align:left'
  99                 })
 100             },{
 101                 id: 'cost',
 102                 header: 'Cost',
 103                 width: 20,
 104                 sortable: false,
 105                 groupable: false,
 106                 renderer: function(v, params, record){
 107                     return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
 108                 },
 109                 dataIndex: 'cost',
 110                 summaryType: 'totalCost',
 111                 summaryRenderer: Ext.util.Format.usMoney
 112             }
 113         ],
 114
 115         view: new Ext.grid.GroupingView({
 116             forceFit: true,
 117             showGroupName: false,
 118             enableNoGroups: false,
 119                         enableGroupingMenu: false,
 120             hideGroupedColumn: true
 121         }),
 122
 123         plugins: summary,
 124
 125         tbar : [{
 126             text: 'Toggle',
 127             tooltip: 'Toggle the visibility of summary row',
 128             handler: function(){summary.toggleSummaries();}
 129         }],
 130
 131         frame: true,
 132         width: 800,
 133         height: 450,
 134         clicksToEdit: 1,
 135         collapsible: true,
 136         animCollapse: false,
 137         trackMouseOver: false,
 138         //enableColumnMove: false,
 139         title: 'Sponsored Projects',
 140         iconCls: 'icon-grid',
 141         renderTo: document.body
 142     });
 143
 144 });
 145
 146 // set up namespace for application
 147 Ext.ns('app.grid');
 148 // store dummy data in the app namespace
 149 app.grid.dummyData = [
 150     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
 151     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
 152     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
 153     {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
 154     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
 155     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
 156     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
 157     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
 158     {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
 159     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
 160     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
 161     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
 162     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
 163     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
 164     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
 165     {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
 166 ];