1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | Ext.onReady(function(){ |
---|
10 | |
---|
11 | Ext.QuickTips.init(); |
---|
12 | |
---|
13 | var xg = Ext.grid; |
---|
14 | |
---|
15 | var reader = new Ext.data.JsonReader({ |
---|
16 | idProperty:'taskId', |
---|
17 | root:'data', |
---|
18 | remoteGroup:true, |
---|
19 | remoteSort: true, |
---|
20 | fields: [ |
---|
21 | {name: 'projectId', type: 'int'}, |
---|
22 | {name: 'project', type: 'string'}, |
---|
23 | {name: 'taskId', type: 'int'}, |
---|
24 | {name: 'description', type: 'string'}, |
---|
25 | {name: 'estimate', type: 'float'}, |
---|
26 | {name: 'rate', type: 'float'}, |
---|
27 | {name: 'cost', type: 'float'}, |
---|
28 | {name: 'due', type: 'date', dateFormat:'m/d/Y'} |
---|
29 | ] |
---|
30 | |
---|
31 | }); |
---|
32 | |
---|
33 | // define a custom summary function |
---|
34 | Ext.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){ |
---|
35 | return v + (record.data.estimate * record.data.rate); |
---|
36 | } |
---|
37 | |
---|
38 | var summary = new Ext.grid.HybridSummary(); |
---|
39 | |
---|
40 | var grid = new xg.EditorGridPanel({ |
---|
41 | ds: new Ext.data.GroupingStore({ |
---|
42 | reader: reader, |
---|
43 | proxy : new Ext.data.HttpProxy({ |
---|
44 | url: 'summary.json', |
---|
45 | method: 'GET' |
---|
46 | }), |
---|
47 | sortInfo:{field: 'due', direction: "ASC"}, |
---|
48 | groupField:'project' |
---|
49 | }), |
---|
50 | |
---|
51 | columns: [ |
---|
52 | { |
---|
53 | id: 'description', |
---|
54 | header: "Task", |
---|
55 | width: 80, |
---|
56 | sortable: true, |
---|
57 | dataIndex: 'description', |
---|
58 | summaryType: 'count', |
---|
59 | hideable: false, |
---|
60 | summaryRenderer: function(v, params, data){ |
---|
61 | return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)'); |
---|
62 | }, |
---|
63 | editor: new Ext.form.TextField({ |
---|
64 | allowBlank: false |
---|
65 | }) |
---|
66 | },{ |
---|
67 | header: "Project", |
---|
68 | width: 20, |
---|
69 | sortable: true, |
---|
70 | dataIndex: 'project' |
---|
71 | },{ |
---|
72 | header: "Due Date", |
---|
73 | width: 25, |
---|
74 | sortable: true, |
---|
75 | dataIndex: 'due', |
---|
76 | summaryType:'max', |
---|
77 | renderer: Ext.util.Format.dateRenderer('m/d/Y'), |
---|
78 | editor: new Ext.form.DateField({ |
---|
79 | format: 'm/d/Y' |
---|
80 | }) |
---|
81 | },{ |
---|
82 | header: "Estimate", |
---|
83 | width: 20, |
---|
84 | sortable: true, |
---|
85 | dataIndex: 'estimate', |
---|
86 | summaryType:'sum', |
---|
87 | renderer : function(v){ |
---|
88 | return v +' hours'; |
---|
89 | }, |
---|
90 | editor: new Ext.form.NumberField({ |
---|
91 | allowBlank: false, |
---|
92 | allowNegative: false, |
---|
93 | style: 'text-align:left' |
---|
94 | }) |
---|
95 | },{ |
---|
96 | header: "Rate", |
---|
97 | width: 20, |
---|
98 | sortable: true, |
---|
99 | renderer: Ext.util.Format.usMoney, |
---|
100 | dataIndex: 'rate', |
---|
101 | summaryType:'average', |
---|
102 | editor: new Ext.form.NumberField({ |
---|
103 | allowBlank: false, |
---|
104 | allowNegative: false, |
---|
105 | style: 'text-align:left' |
---|
106 | }) |
---|
107 | },{ |
---|
108 | id: 'cost', |
---|
109 | header: "Cost", |
---|
110 | width: 20, |
---|
111 | sortable: false, |
---|
112 | groupable: false, |
---|
113 | renderer: function(v, params, record){ |
---|
114 | return Ext.util.Format.usMoney(record.data.estimate * record.data.rate); |
---|
115 | }, |
---|
116 | dataIndex: 'cost', |
---|
117 | summaryType:'totalCost', |
---|
118 | summaryRenderer: Ext.util.Format.usMoney |
---|
119 | } |
---|
120 | ], |
---|
121 | |
---|
122 | view: new Ext.grid.GroupingView({ |
---|
123 | forceFit:true, |
---|
124 | showGroupName: false, |
---|
125 | hideGroupedColumn: true |
---|
126 | }), |
---|
127 | |
---|
128 | plugins: summary, |
---|
129 | |
---|
130 | tbar : [{ |
---|
131 | text: 'Toggle', |
---|
132 | handler: function(){summary.toggleSummaries();} |
---|
133 | }], |
---|
134 | |
---|
135 | frame:true, |
---|
136 | width: 800, |
---|
137 | height: 450, |
---|
138 | clicksToEdit: 1, |
---|
139 | collapsible: true, |
---|
140 | animCollapse: false, |
---|
141 | trackMouseOver: false, |
---|
142 | //enableColumnMove: false, |
---|
143 | title: 'Sponsored Projects', |
---|
144 | iconCls: 'icon-grid', |
---|
145 | renderTo: document.body |
---|
146 | }); |
---|
147 | |
---|
148 | grid.on('afteredit', function(){ |
---|
149 | var groupValue = 'Ext Forms: Field Anchoring'; |
---|
150 | summary.showSummaryMsg(groupValue, 'Updating Summary...'); |
---|
151 | setTimeout(function(){ // simulate server call |
---|
152 | summary.updateSummaryData(groupValue, |
---|
153 | {due: new Date(2007, 6, 29), estimate: 21, rate: 185, cost: 2900}); |
---|
154 | }, 2000); |
---|
155 | }); |
---|
156 | |
---|
157 | grid.store.load(); |
---|
158 | }); |
---|
159 | |
---|
160 | Ext.grid.dummyProjects = [ |
---|
161 | {projectId: 100, project: 'Ext Forms: Field Anchoring'}, |
---|
162 | {projectId: 101, project: 'Ext Grid: Single-level Grouping'}, |
---|
163 | {projectId: 102, project: 'Ext Grid: Summary Rows'} |
---|
164 | ]; |
---|
165 | |
---|
166 | Ext.grid.dummyData = [ |
---|
167 | {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'}, |
---|
168 | {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'}, |
---|
169 | {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'}, |
---|
170 | {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'}, |
---|
171 | {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'}, |
---|
172 | {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'}, |
---|
173 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'}, |
---|
174 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'}, |
---|
175 | {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'}, |
---|
176 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'}, |
---|
177 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'}, |
---|
178 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'}, |
---|
179 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'}, |
---|
180 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'}, |
---|
181 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'}, |
---|
182 | {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'} |
---|
183 | ]; |
---|