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