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 | Ext.QuickTips.init(); |
---|
9 | |
---|
10 | var Employee = Ext.data.Record.create([{ |
---|
11 | name: 'name', |
---|
12 | type: 'string' |
---|
13 | }, { |
---|
14 | name: 'email', |
---|
15 | type: 'string' |
---|
16 | }, { |
---|
17 | name: 'start', |
---|
18 | type: 'date', |
---|
19 | dateFormat: 'n/j/Y' |
---|
20 | },{ |
---|
21 | name: 'salary', |
---|
22 | type: 'float' |
---|
23 | },{ |
---|
24 | name: 'active', |
---|
25 | type: 'bool' |
---|
26 | }]); |
---|
27 | |
---|
28 | |
---|
29 | // hideous function to generate employee data |
---|
30 | var genData = function(){ |
---|
31 | var data = []; |
---|
32 | var s = new Date(2007, 0, 1); |
---|
33 | var now = new Date(), i = -1; |
---|
34 | while(s.getTime() < now.getTime()){ |
---|
35 | var ecount = Ext.ux.getRandomInt(0, 3); |
---|
36 | for(var i = 0; i < ecount; i++){ |
---|
37 | var name = Ext.ux.generateName(); |
---|
38 | data.push({ |
---|
39 | start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)), |
---|
40 | name : name, |
---|
41 | email: name.toLowerCase().replace(' ', '.') + '@exttest.com', |
---|
42 | active: true, |
---|
43 | salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000 |
---|
44 | }); |
---|
45 | } |
---|
46 | s = s.add(Date.MONTH, 1); |
---|
47 | } |
---|
48 | return data; |
---|
49 | } |
---|
50 | |
---|
51 | |
---|
52 | var store = new Ext.data.GroupingStore({ |
---|
53 | reader: new Ext.data.JsonReader({fields: Employee}), |
---|
54 | data: genData(), |
---|
55 | sortInfo: {field: 'start', direction: 'ASC'} |
---|
56 | }); |
---|
57 | |
---|
58 | var editor = new Ext.ux.grid.RowEditor({ |
---|
59 | saveText: 'Update' |
---|
60 | }); |
---|
61 | |
---|
62 | var grid = new Ext.grid.GridPanel({ |
---|
63 | store: store, |
---|
64 | width: 600, |
---|
65 | region:'center', |
---|
66 | margins: '0 5 5 5', |
---|
67 | autoExpandColumn: 'name', |
---|
68 | plugins: [editor], |
---|
69 | view: new Ext.grid.GroupingView({ |
---|
70 | markDirty: false |
---|
71 | }), |
---|
72 | tbar: [{ |
---|
73 | iconCls: 'icon-user-add', |
---|
74 | text: 'Add Employee', |
---|
75 | handler: function(){ |
---|
76 | var e = new Employee({ |
---|
77 | name: 'New Guy', |
---|
78 | email: 'new@exttest.com', |
---|
79 | start: (new Date()).clearTime(), |
---|
80 | salary: 50000, |
---|
81 | active: true |
---|
82 | }); |
---|
83 | editor.stopEditing(); |
---|
84 | store.insert(0, e); |
---|
85 | grid.getView().refresh(); |
---|
86 | grid.getSelectionModel().selectRow(0); |
---|
87 | editor.startEditing(0); |
---|
88 | } |
---|
89 | },{ |
---|
90 | ref: '../removeBtn', |
---|
91 | iconCls: 'icon-user-delete', |
---|
92 | text: 'Remove Employee', |
---|
93 | disabled: true, |
---|
94 | handler: function(){ |
---|
95 | editor.stopEditing(); |
---|
96 | var s = grid.getSelectionModel().getSelections(); |
---|
97 | for(var i = 0, r; r = s[i]; i++){ |
---|
98 | store.remove(r); |
---|
99 | } |
---|
100 | } |
---|
101 | }], |
---|
102 | |
---|
103 | columns: [ |
---|
104 | new Ext.grid.RowNumberer(), |
---|
105 | { |
---|
106 | id: 'name', |
---|
107 | header: 'First Name', |
---|
108 | dataIndex: 'name', |
---|
109 | width: 220, |
---|
110 | sortable: true, |
---|
111 | editor: { |
---|
112 | xtype: 'textfield', |
---|
113 | allowBlank: false |
---|
114 | } |
---|
115 | },{ |
---|
116 | header: 'Email', |
---|
117 | dataIndex: 'email', |
---|
118 | width: 150, |
---|
119 | sortable: true, |
---|
120 | editor: { |
---|
121 | xtype: 'textfield', |
---|
122 | allowBlank: false, |
---|
123 | vtype: 'email' |
---|
124 | } |
---|
125 | },{ |
---|
126 | xtype: 'datecolumn', |
---|
127 | header: 'Start Date', |
---|
128 | dataIndex: 'start', |
---|
129 | format: 'm/d/Y', |
---|
130 | width: 100, |
---|
131 | sortable: true, |
---|
132 | groupRenderer: Ext.util.Format.dateRenderer('M y'), |
---|
133 | editor: { |
---|
134 | xtype: 'datefield', |
---|
135 | allowBlank: false, |
---|
136 | minValue: '01/01/2006', |
---|
137 | minText: 'Can\'t have a start date before the company existed!', |
---|
138 | maxValue: (new Date()).format('m/d/Y') |
---|
139 | } |
---|
140 | },{ |
---|
141 | xtype: 'numbercolumn', |
---|
142 | header: 'Salary', |
---|
143 | dataIndex: 'salary', |
---|
144 | format: '$0,0.00', |
---|
145 | width: 100, |
---|
146 | sortable: true, |
---|
147 | editor: { |
---|
148 | xtype: 'numberfield', |
---|
149 | allowBlank: false, |
---|
150 | minValue: 1, |
---|
151 | maxValue: 150000 |
---|
152 | } |
---|
153 | },{ |
---|
154 | xtype: 'booleancolumn', |
---|
155 | header: 'Active', |
---|
156 | dataIndex: 'active', |
---|
157 | align: 'center', |
---|
158 | width: 50, |
---|
159 | trueText: 'Yes', |
---|
160 | falseText: 'No', |
---|
161 | editor: { |
---|
162 | xtype: 'checkbox' |
---|
163 | } |
---|
164 | }] |
---|
165 | }); |
---|
166 | |
---|
167 | var cstore = new Ext.data.JsonStore({ |
---|
168 | fields:['month', 'employees', 'salary'], |
---|
169 | data:[], |
---|
170 | refreshData: function(){ |
---|
171 | var o = {}, data = []; |
---|
172 | var s = new Date(2007, 0, 1); |
---|
173 | var now = new Date(), i = -1; |
---|
174 | while(s.getTime() < now.getTime()){ |
---|
175 | var m = { |
---|
176 | month: s.format('M y'), |
---|
177 | employees: 0, |
---|
178 | salary: 0, |
---|
179 | index: ++i |
---|
180 | } |
---|
181 | data.push(m); |
---|
182 | o[m.month] = m; |
---|
183 | s = s.add(Date.MONTH, 1); |
---|
184 | } |
---|
185 | store.each(function(r){ |
---|
186 | var m = o[r.data.start.format('M y')]; |
---|
187 | for(var i = m.index, mo; mo = data[i]; i++){ |
---|
188 | mo.employees += 10000; |
---|
189 | mo.salary += r.data.salary; |
---|
190 | } |
---|
191 | }); |
---|
192 | this.loadData(data); |
---|
193 | } |
---|
194 | }); |
---|
195 | cstore.refreshData(); |
---|
196 | store.on('add', cstore.refreshData, cstore); |
---|
197 | store.on('remove', cstore.refreshData, cstore); |
---|
198 | store.on('update', cstore.refreshData, cstore); |
---|
199 | |
---|
200 | var chart = new Ext.Panel({ |
---|
201 | width:600, |
---|
202 | height:200, |
---|
203 | layout:'fit', |
---|
204 | margins: '5 5 0', |
---|
205 | region: 'north', |
---|
206 | split: true, |
---|
207 | minHeight: 100, |
---|
208 | maxHeight: 500, |
---|
209 | |
---|
210 | items: { |
---|
211 | xtype: 'columnchart', |
---|
212 | store: cstore, |
---|
213 | url:'../../resources/charts.swf', |
---|
214 | xField: 'month', |
---|
215 | yAxis: new Ext.chart.NumericAxis({ |
---|
216 | displayName: 'Employees', |
---|
217 | labelRenderer : Ext.util.Format.numberRenderer('0,0') |
---|
218 | }), |
---|
219 | tipRenderer : function(chart, record, index, series){ |
---|
220 | if(series.yField == 'salary'){ |
---|
221 | return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month; |
---|
222 | }else{ |
---|
223 | return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month; |
---|
224 | } |
---|
225 | }, |
---|
226 | |
---|
227 | // style chart so it looks pretty |
---|
228 | chartStyle: { |
---|
229 | padding: 10, |
---|
230 | animationEnabled: true, |
---|
231 | font: { |
---|
232 | name: 'Tahoma', |
---|
233 | color: 0x444444, |
---|
234 | size: 11 |
---|
235 | }, |
---|
236 | dataTip: { |
---|
237 | padding: 5, |
---|
238 | border: { |
---|
239 | color: 0x99bbe8, |
---|
240 | size:1 |
---|
241 | }, |
---|
242 | background: { |
---|
243 | color: 0xDAE7F6, |
---|
244 | alpha: .9 |
---|
245 | }, |
---|
246 | font: { |
---|
247 | name: 'Tahoma', |
---|
248 | color: 0x15428B, |
---|
249 | size: 10, |
---|
250 | bold: true |
---|
251 | } |
---|
252 | }, |
---|
253 | xAxis: { |
---|
254 | color: 0x69aBc8, |
---|
255 | majorTicks: {color: 0x69aBc8, length: 4}, |
---|
256 | minorTicks: {color: 0x69aBc8, length: 2}, |
---|
257 | majorGridLines: {size: 1, color: 0xeeeeee} |
---|
258 | }, |
---|
259 | yAxis: { |
---|
260 | color: 0x69aBc8, |
---|
261 | majorTicks: {color: 0x69aBc8, length: 4}, |
---|
262 | minorTicks: {color: 0x69aBc8, length: 2}, |
---|
263 | majorGridLines: {size: 1, color: 0xdfe8f6} |
---|
264 | } |
---|
265 | }, |
---|
266 | series: [{ |
---|
267 | type: 'column', |
---|
268 | displayName: 'Salary', |
---|
269 | yField: 'salary', |
---|
270 | style: { |
---|
271 | image:'../chart/bar.gif', |
---|
272 | mode: 'stretch', |
---|
273 | color:0x99BBE8 |
---|
274 | } |
---|
275 | }] |
---|
276 | } |
---|
277 | }); |
---|
278 | |
---|
279 | |
---|
280 | var layout = new Ext.Panel({ |
---|
281 | title: 'Employee Salary by Month', |
---|
282 | layout: 'border', |
---|
283 | layoutConfig: { |
---|
284 | columns: 1 |
---|
285 | }, |
---|
286 | width:600, |
---|
287 | height: 600, |
---|
288 | items: [chart, grid] |
---|
289 | }); |
---|
290 | layout.render(Ext.getBody()); |
---|
291 | |
---|
292 | grid.getSelectionModel().on('selectionchange', function(sm){ |
---|
293 | grid.removeBtn.setDisabled(sm.getCount() < 1); |
---|
294 | }); |
---|
295 | }); |
---|