Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / 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>