docs/source/totals-hybrid.html

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