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