3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.onReady(function(){
10 var Employee = Ext.data.Record.create([{
29 // hideous function to generate employee data
30 var genData = function(){
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();
39 start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
41 email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
43 salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
46 s = s.add(Date.MONTH, 1);
52 var store = new Ext.data.GroupingStore({
53 reader: new Ext.data.JsonReader({fields: Employee}),
55 sortInfo: {field: 'start', direction: 'ASC'}
58 var editor = new Ext.ux.grid.RowEditor({
62 var grid = new Ext.grid.GridPanel({
67 autoExpandColumn: 'name',
69 view: new Ext.grid.GroupingView({
73 iconCls: 'icon-user-add',
76 var e = new Employee({
78 email: 'new@exttest.com',
79 start: (new Date()).clearTime(),
85 grid.getView().refresh();
86 grid.getSelectionModel().selectRow(0);
87 editor.startEditing(0);
91 iconCls: 'icon-user-delete',
92 text: 'Remove Employee',
96 var s = grid.getSelectionModel().getSelections();
97 for(var i = 0, r; r = s[i]; i++){
104 new Ext.grid.RowNumberer(),
107 header: 'First Name',
127 header: 'Start Date',
132 groupRenderer: Ext.util.Format.dateRenderer('M y'),
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')
141 xtype: 'numbercolumn',
148 xtype: 'numberfield',
154 xtype: 'booleancolumn',
167 var cstore = new Ext.data.JsonStore({
168 fields:['month', 'employees', 'salary'],
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()){
176 month: s.format('M y'),
183 s = s.add(Date.MONTH, 1);
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;
195 cstore.refreshData();
196 store.on('add', cstore.refreshData, cstore);
197 store.on('remove', cstore.refreshData, cstore);
198 store.on('update', cstore.refreshData, cstore);
200 var chart = new Ext.Panel({
211 xtype: 'columnchart',
213 url:'../../resources/charts.swf',
215 yAxis: new Ext.chart.NumericAxis({
216 displayName: 'Employees',
217 labelRenderer : Ext.util.Format.numberRenderer('0,0')
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;
223 return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
227 // style chart so it looks pretty
230 animationEnabled: true,
255 majorTicks: {color: 0x69aBc8, length: 4},
256 minorTicks: {color: 0x69aBc8, length: 2},
257 majorGridLines: {size: 1, color: 0xeeeeee}
261 majorTicks: {color: 0x69aBc8, length: 4},
262 minorTicks: {color: 0x69aBc8, length: 2},
263 majorGridLines: {size: 1, color: 0xdfe8f6}
268 displayName: 'Salary',
271 image:'../chart/bar.gif',
280 var layout = new Ext.Panel({
281 title: 'Employee Salary by Month',
290 layout.render(Ext.getBody());
292 grid.getSelectionModel().on('selectionchange', function(sm){
293 grid.removeBtn.setDisabled(sm.getCount() < 1);