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
7 <body onload="prettyPrint();">
\r
8 <pre class="prettyprint lang-js">Ext.onReady(function(){
\r
9 Ext.QuickTips.init();
\r
11 var Employee = Ext.data.Record.create([{
\r
30 // hideous function to generate employee data
\r
31 var genData = function(){
\r
33 var s = new Date(2007, 0, 1);
\r
34 var now = new Date(), i = -1;
\r
35 while(s.getTime() < now.getTime()){
\r
36 var ecount = Ext.ux.getRandomInt(0, 3);
\r
37 for(var i = 0; i < ecount; i++){
\r
38 var name = Ext.ux.generateName();
\r
40 start : s.clearTime(true).add(Date.DAY, Ext.ux.getRandomInt(0, 27)),
\r
42 email: name.toLowerCase().replace(' ', '.') + '@exttest.com',
\r
44 salary: Math.floor(Ext.ux.getRandomInt(35000, 85000)/1000)*1000
\r
47 s = s.add(Date.MONTH, 1);
\r
53 var store = new Ext.data.GroupingStore({
\r
54 reader: new Ext.data.JsonReader({fields: Employee}),
\r
56 sortInfo: {field: 'start', direction: 'ASC'}
\r
59 var editor = new Ext.ux.grid.RowEditor({
\r
63 var grid = new Ext.grid.GridPanel({
\r
68 autoExpandColumn: 'name',
\r
70 view: new Ext.grid.GroupingView({
\r
74 iconCls: 'icon-user-add',
\r
75 text: 'Add Employee',
\r
76 handler: function(){
\r
77 var e = new Employee({
\r
79 email: 'new@exttest.com',
\r
80 start: (new Date()).clearTime(),
\r
84 editor.stopEditing();
\r
86 grid.getView().refresh();
\r
87 grid.getSelectionModel().selectRow(0);
\r
88 editor.startEditing(0);
\r
91 ref: '../removeBtn',
\r
92 iconCls: 'icon-user-delete',
\r
93 text: 'Remove Employee',
\r
95 handler: function(){
\r
96 editor.stopEditing();
\r
97 var s = grid.getSelectionModel().getSelections();
\r
98 for(var i = 0, r; r = s[i]; i++){
\r
105 new Ext.grid.RowNumberer(),
\r
108 header: 'First Name',
\r
113 xtype: 'textfield',
\r
118 dataIndex: 'email',
\r
122 xtype: 'textfield',
\r
127 xtype: 'datecolumn',
\r
128 header: 'Start Date',
\r
129 dataIndex: 'start',
\r
133 groupRenderer: Ext.util.Format.dateRenderer('M y'),
\r
135 xtype: 'datefield',
\r
137 minValue: '01/01/2006',
\r
138 minText: 'Can\'t have a start date before the company existed!',
\r
139 maxValue: (new Date()).format('m/d/Y')
\r
142 xtype: 'numbercolumn',
\r
144 dataIndex: 'salary',
\r
149 xtype: 'numberfield',
\r
155 xtype: 'booleancolumn',
\r
157 dataIndex: 'active',
\r
168 var cstore = new Ext.data.JsonStore({
\r
169 fields:['month', 'employees', 'salary'],
\r
171 refreshData: function(){
\r
172 var o = {}, data = [];
\r
173 var s = new Date(2007, 0, 1);
\r
174 var now = new Date(), i = -1;
\r
175 while(s.getTime() < now.getTime()){
\r
177 month: s.format('M y'),
\r
184 s = s.add(Date.MONTH, 1);
\r
186 store.each(function(r){
\r
187 var m = o[r.data.start.format('M y')];
\r
188 for(var i = m.index, mo; mo = data[i]; i++){
\r
189 mo.employees += 10000;
\r
190 mo.salary += r.data.salary;
\r
193 this.loadData(data);
\r
196 cstore.refreshData();
\r
197 store.on('add', cstore.refreshData, cstore);
\r
198 store.on('remove', cstore.refreshData, cstore);
\r
199 store.on('update', cstore.refreshData, cstore);
\r
201 var chart = new Ext.Panel({
\r
212 xtype: 'columnchart',
\r
214 url:'../../resources/charts.swf',
\r
216 yAxis: new Ext.chart.NumericAxis({
\r
217 displayName: 'Employees',
\r
218 labelRenderer : Ext.util.Format.numberRenderer('0,0')
\r
220 tipRenderer : function(chart, record, index, series){
\r
221 if(series.yField == 'salary'){
\r
222 return Ext.util.Format.number(record.data.salary, '$0,0') + ' total salary in ' + record.data.month;
\r
224 return Ext.util.Format.number(Math.floor(record.data.employees/10000), '0,0') + ' total employees in ' + record.data.month;
\r
228 // style chart so it looks pretty
\r
231 animationEnabled: true,
\r
256 majorTicks: {color: 0x69aBc8, length: 4},
\r
257 minorTicks: {color: 0x69aBc8, length: 2},
\r
258 majorGridLines: {size: 1, color: 0xeeeeee}
\r
262 majorTicks: {color: 0x69aBc8, length: 4},
\r
263 minorTicks: {color: 0x69aBc8, length: 2},
\r
264 majorGridLines: {size: 1, color: 0xdfe8f6}
\r
269 displayName: 'Salary',
\r
272 image:'../chart/bar.gif',
\r
281 var layout = new Ext.Panel({
\r
282 title: 'Employee Salary by Month',
\r
289 items: [chart, grid]
\r
291 layout.render(Ext.getBody());
\r
293 grid.getSelectionModel().on('selectionchange', function(sm){
\r
294 grid.removeBtn.setDisabled(sm.getCount() < 1);
\r