examples/grid/totals-hybrid.js

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