examples/personel-review/reviewapp.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     '*'
  17 ]);
  18
  19 Ext.BLANK_IMAGE_URL = '../libs/ext-4.0/resources/themes/images/default/tree/s.gif';
  20
  21 Ext.onReady(function() {
  22
  23     // Employee Data Model
  24     Ext.regModel('Employee', {
  25         fields: [
  26             {name:'id', type:'int'},
  27             {name:'first_name', type:'string'},
  28             {name:'last_name', type:'string'},
  29             {name:'title', type:'string'}
  30         ],
  31
  32         hasMany: {model:'Review', name:'reviews'}
  33     });
  34
  35     // Review Data Model
  36     Ext.regModel('Review', {
  37         fields: [
  38             {name:'review_date', label:'Date', type:'date', dateFormat:'d-m-Y'},
  39             {name:'attendance', label:'Attendance', type:'int'},
  40             {name:'attitude', label:'Attitude', type:'int'},
  41             {name:'communication', label:'Communication', type:'int'},
  42             {name:'excellence', label:'Excellence', type:'int'},
  43             {name:'skills', label:'Skills', type:'int'},
  44             {name:'teamwork', label:'Teamwork', type:'int'},
  45             {name:'employee_id', label:'Employee ID', type:'int'}
  46         ],
  47
  48         belongsTo: 'Employee'
  49     });
  50
  51     // Instance of a Data Store to hold Employee records
  52     var employeeStore = new Ext.data.Store({
  53         storeId:'employeeStore',
  54         model:'Employee',
  55         data:[
  56             {id:1, first_name:'Michael', last_name:'Scott', title:'Regional Manager'},
  57             {id:2, first_name:'Dwight', last_name:'Schrute', title:'Sales Rep'},
  58             {id:3, first_name:'Jim', last_name:'Halpert', title:'Sales Rep'},
  59             {id:4, first_name:'Pam', last_name:'Halpert', title:'Office Administrator'},
  60             {id:5, first_name:'Andy', last_name:'Bernard', title:'Sales Rep'},
  61             {id:6, first_name:'Stanley', last_name:'Hudson', title:'Sales Rep'},
  62             {id:7, first_name:'Phyllis', last_name:'Lapin-Vance', title:'Sales Rep'},
  63             {id:8, first_name:'Kevin', last_name:'Malone', title:'Accountant'},
  64             {id:9, first_name:'Angela', last_name:'Martin', title:'Senior Accountant'},
  65             {id:10, first_name:'Meredith', last_name:'Palmer', title:'Supplier Relations Rep'}
  66         ],
  67         autoLoad:true
  68     });
  69
  70    /**
  71      * App.RadarStore
  72      * @extends Ext.data.Store
  73      * This is a specialized Data Store with dynamically generated fields
  74      * data reformating capabilities to transform Employee and Review data
  75      * into the format required by the Radar Chart.
  76      *
  77      * The constructor demonstrates dynamically generating store fields.
  78      * populateReviewScores() populates the store using records from
  79      * the reviewStore which holds all the employee review scores.
  80      *
  81      * calculateAverageScores() iterates through each metric in the
  82      * review and calculates an average across all available reviews.
  83      *
  84      * Most of the actual data population and updates done by
  85      * addUpdateRecordFromReviews() and removeRecordFromReviews()
  86      * called when add/update/delete events are triggered on the ReviewStore.
  87      */
  88     Ext.define('App.RadarStore', {
  89         extend: 'Ext.data.Store',
  90
  91         constructor: function(config) {
  92             config = config || {};
  93             var dynamicFields = ['metric', 'avg'];  // initalize the non-dynamic fields first
  94
  95             employeeStore.each(function(record){    // loops through all the employees to setup the dynamic fields
  96                 dynamicFields.push('eid_' + record.get('id'));
  97             });
  98
  99             Ext.apply(config, {
 100                 storeId:'radarStore',   // let's us look it up later using Ext.data.StoreMgr.lookup('radarStore')
 101                 fields:dynamicFields,
 102                 data:[]
 103             });
 104
 105             App.RadarStore.superclass.constructor.call(this, config);
 106         },
 107
 108         addUpdateRecordFromReviews: function(reviews) {
 109             var me = this;
 110
 111             Ext.Array.each(reviews, function(review, recordIndex, all) {    // add a new radarStore record for each review record
 112                 var eid = 'eid_' + review.get('employee_id');   // creates a unique id for each employee column in the store
 113
 114                 review.fields.each(function(field) {
 115
 116                     if(field.name !== "employee_id" && field.name !== "review_date") {  // filter out the fields we don't need
 117                         var metricRecord = me.findRecord('metric', field.name); // checks for an existing metric record in the store
 118                         if(metricRecord) {
 119                             metricRecord.set(eid, review.get(field.name));  // updates existing record with field value from review
 120                         } else {
 121                             var newRecord = {};    // creates a new object we can populate with dynamic keys and values to create a new record
 122                             newRecord[eid] = review.get(field.name);
 123                             newRecord['metric'] = field.label;
 124                             me.add(newRecord);
 125                         }
 126                     }
 127                 });
 128             });
 129
 130             this.calculateAverageScores();  // update average scores
 131         },
 132
 133        /**
 134          * Calculates an average for each metric across all employees.
 135          * We use this to create the average series always shown in the Radar Chart.
 136          */
 137         calculateAverageScores: function() {
 138             var me = this; // keeps the store in scope during Ext.Array.each
 139             var reviewStore = Ext.data.StoreMgr.lookup('reviewStore');
 140
 141             var Review = Ext.ModelMgr.getModel('Review');
 142
 143             Ext.Array.each(Review.prototype.fields.keys, function(fieldName) {  // loop through the Review model fields and calculate average scores
 144                 if(fieldName !== "employee_id" && fieldName !== "review_date") {  // ignore non-score fields
 145                     var avgScore = Math.round(reviewStore.average(fieldName));  // takes advantage of Ext.data.Store.average()
 146                     var record = me.findRecord('metric', fieldName);
 147
 148                     if(record) {
 149                         record.set('avg', avgScore);
 150                     } else {
 151                         me.add({metric:fieldName, avg:avgScore});
 152                     }
 153                 }
 154             });
 155         },
 156
 157         populateReviewScores: function() {
 158             var reviewStore = Ext.data.StoreMgr.lookup('reviewStore');
 159             this.addUpdateRecordFromReviews(reviewStore.data.items); // add all the review records to this store
 160         },
 161
 162         removeRecordFromReviews: function(reviews) {
 163             var me = this;
 164             Ext.Array.each(reviews, function(review, recordIndex, all) {
 165                 var eid = 'eid_' + review.get('employee_id');
 166
 167                 me.each(function(record) {
 168                     delete record.data[eid];
 169                 });
 170             });
 171
 172             // upate average scores
 173             this.calculateAverageScores();
 174         }
 175     }); // end App.RadarStore definition
 176
 177
 178    /** Creates an instance of App.RadarStore here so we
 179      * here so we can re-use it during the life of the app.
 180      * Otherwise we'd have to create a new instance everytime
 181      * refreshRadarChart() is run.
 182      */
 183     var radarStore = new App.RadarStore();
 184
 185     var reviewStore = new Ext.data.Store({
 186         storeId:'reviewStore',
 187         model:'Review',
 188         data:[
 189             {review_date:'01-04-2011', attendance:10, attitude:6, communication:6, excellence:3, skills:3, teamwork:3, employee_id:1},
 190             {review_date:'01-04-2011', attendance:6, attitude:5, communication:2, excellence:8, skills:9, teamwork:5, employee_id:2},
 191             {review_date:'01-04-2011', attendance:5, attitude:4, communication:3, excellence:5, skills:6, teamwork:2, employee_id:3},
 192             {review_date:'01-04-2011', attendance:8, attitude:2, communication:4, excellence:2, skills:5, teamwork:6, employee_id:4},
 193             {review_date:'01-04-2011', attendance:4, attitude:1, communication:5, excellence:7, skills:5, teamwork:5, employee_id:5},
 194             {review_date:'01-04-2011', attendance:5, attitude:2, communication:4, excellence:7, skills:9, teamwork:8, employee_id:6},
 195             {review_date:'01-04-2011', attendance:10, attitude:7, communication:8, excellence:7, skills:3, teamwork:4, employee_id:7},
 196             {review_date:'01-04-2011', attendance:10, attitude:8, communication:8, excellence:4, skills:8, teamwork:7, employee_id:8},
 197             {review_date:'01-04-2011', attendance:6, attitude:4, communication:9, excellence:7, skills:6, teamwork:5, employee_id:9},
 198             {review_date:'01-04-2011', attendance:7, attitude:5, communication:9, excellence:4, skills:2, teamwork:4, employee_id:10}
 199         ],
 200         listeners: {
 201             add:function(store, records, storeIndex) {
 202                 var radarStore = Ext.data.StoreMgr.lookup('radarStore');
 203
 204                 if(radarStore) {    // only add records if an instance of the rardarStore already exists
 205                     radarStore.addUpdateRecordFromReviews(records);   // add a new radarStore records for new review records
 206                 }
 207             }, // end add listener
 208             update: function(store, record, operation) {
 209                 radarStore.addUpdateRecordFromReviews([record]);
 210                 refreshRadarChart();
 211             },
 212             remove: function(store, records, storeIndex) {
 213                 // update the radarStore and regenerate the radarChart
 214                 Ext.data.StoreMgr.lookup('radarStore').removeRecordFromReviews(records);
 215                 refreshRadarChart();
 216             } // end remove listener
 217         }
 218     });
 219
 220    /**
 221      * App.PerformanceRadar
 222      * @extends Ext.chart.Chart
 223      * This is a specialized Radar Chart which we use to display employee
 224      * performance reviews.
 225      *
 226      * The class will be registered with an xtype of 'performanceradar'
 227      */
 228     Ext.define('App.PerformanceRadar', {
 229         extend: 'Ext.chart.Chart',
 230         alias: 'widget.performanceradar',           // register xtype performanceradar
 231         constructor: function(config) {
 232             config = config || {};
 233
 234             this.setAverageSeries(config);    // make sure average is always present
 235
 236             Ext.apply(config, {
 237                 id:'radarchart',
 238                 theme:'Category2',
 239                 animate:true,
 240                 store: Ext.data.StoreMgr.lookup('radarStore'),
 241                 margin:'0 0 50 0',
 242                 width:350,
 243                 height:500,
 244                 insetPadding:80,
 245                 legend:{
 246                     position: 'bottom'
 247                 },
 248                 axes: [{
 249                     type:'Radial',
 250                     position:'radial',
 251                     label:{
 252                         display: true
 253                     }
 254                 }]
 255             }); // end Ext.apply
 256
 257             App.PerformanceRadar.superclass.constructor.call(this, config);
 258
 259         }, // end constructor
 260
 261         setAverageSeries: function(config) {
 262             var avgSeries = {
 263                 type: 'radar',
 264                 xField: 'metric',
 265                 yField: 'avg',
 266                 title: 'Avg',
 267                 labelDisplay:'over',
 268                 showInLegend: true,
 269                 showMarkers: true,
 270                 markerCfg: {
 271                     radius: 5,
 272                     size: 5,
 273                     stroke:'#0677BD',
 274                     fill:'#0677BD'
 275                 },
 276                 style: {
 277                     'stroke-width': 2,
 278                     'stroke':'#0677BD',
 279                     fill: 'none'
 280                 }
 281             }
 282
 283             if(config.series) {
 284                 config.series.push(avgSeries);     // if a series is passed in then append the average to it
 285             } else {
 286                 config.series = [avgSeries];    // if a series isn't passed just create average
 287             }
 288         }
 289
 290     }); // end Ext.ux.Performance radar definition
 291
 292    /**
 293      * App.EmployeeDetail
 294      * @extends Ext.Panel
 295      * This is a specialized Panel which is used to show information about
 296      * an employee and the reviews we have on record for them.
 297      *
 298      * This demonstrates adding 2 custom properties (tplMarkup and
 299      * startingMarkup) to the class. It also overrides the initComponent
 300      * method and adds a new method called updateDetail.
 301      *
 302      * The class will be registered with an xtype of 'employeedetail'
 303      */
 304     Ext.define('App.EmployeeDetail', {
 305         extend: 'Ext.panel.Panel',
 306         // register the App.EmployeeDetail class with an xtype of employeedetail
 307         alias: 'widget.employeedetail',
 308         // add tplMarkup as a new property
 309         tplMarkup: [
 310             '<b>{first_name}&nbsp;{last_name}</b>&nbsp;&nbsp;',
 311             'Title: {title}<br/><br/>',
 312             '<b>Last Review</b>&nbsp;&nbsp;',
 313             'Attendance:&nbsp;{attendance}&nbsp;&nbsp;',
 314             'Attitude:&nbsp;{attitude}&nbsp;&nbsp;',
 315             'Communication:&nbsp;{communication}&nbsp;&nbsp;',
 316             'Excellence:&nbsp;{excellence}&nbsp;&nbsp;',
 317             'Skills:&nbsp;{skills}&nbsp;&nbsp;',
 318             'Teamwork:&nbsp;{teamwork}'
 319         ],
 320
 321         height:90,
 322         bodyPadding: 7,
 323         // override initComponent to create and compile the template
 324         // apply styles to the body of the panel
 325         initComponent: function() {
 326             this.tpl = new Ext.Template(this.tplMarkup);
 327
 328             // call the superclass's initComponent implementation
 329             App.EmployeeDetail.superclass.initComponent.call(this);
 330         }
 331     });
 332
 333     Ext.define('App.ReviewWindow', {
 334         extend: 'Ext.window.Window',
 335
 336         constructor: function(config) {
 337             config = config || {};
 338             Ext.apply(config, {
 339                 title:'Employee Performance Review',
 340                 width:320,
 341                 height:420,
 342                 layout:'fit',
 343                 items:[{
 344                     xtype:'form',
 345                     id:'employeereviewcomboform',
 346                     fieldDefaults: {
 347                         labelAlign: 'left',
 348                         labelWidth: 90,
 349                         anchor: '100%'
 350                     },
 351                     bodyPadding:5,
 352                     items:[{
 353                         xtype:'fieldset',
 354                         title:'Employee Info',
 355                         items:[{
 356                             xtype:'hiddenfield',
 357                             name:'employee_id'
 358                         },{
 359                             xtype:'textfield',
 360                             name:'first_name',
 361                             fieldLabel:'First Name',
 362                             allowBlank:false
 363                         },{
 364                             xtype:'textfield',
 365                             name:'last_name',
 366                             fieldLabel:'Last Name',
 367                             allowBlank:false
 368                         },{
 369                             xtype:'textfield',
 370                             name:'title',
 371                             fieldLabel:'Title',
 372                             allowBlank:false
 373                         }]
 374                     },{
 375                         xtype:'fieldset',
 376                         title:'Performance Review',
 377                         items:[{
 378                             xtype:'datefield',
 379                             name:'review_date',
 380                             fieldLabel:'Review Date',
 381                             format:'d-m-Y',
 382                             maxValue: new Date(),
 383                             value: new Date(),
 384                             allowBlank:false
 385                         },{
 386                             xtype:'slider',
 387                             name:'attendance',
 388                             fieldLabel:'Attendance',
 389                             value:5,
 390                             increment:1,
 391                             minValue:1,
 392                             maxValue:10
 393                         },{
 394                             xtype:'slider',
 395                             name:'attitude',
 396                             fieldLabel:'Attitude',
 397                             value:5,
 398                             minValue: 1,
 399                             maxValue: 10
 400                         },{
 401                             xtype:'slider',
 402                             name:'communication',
 403                             fieldLabel:'Communication',
 404                             value:5,
 405                             increment:1,
 406                             minValue:1,
 407                             maxValue:10
 408                         },{
 409                             xtype:'numberfield',
 410                             name:'excellence',
 411                             fieldLabel:'Excellence',
 412                             value:5,
 413                             minValue: 1,
 414                             maxValue: 10
 415                         },{
 416                             xtype:'numberfield',
 417                             name:'skills',
 418                             fieldLabel:'Skills',
 419                             value:5,
 420                             minValue: 1,
 421                             maxValue: 10
 422                         },{
 423                             xtype:'numberfield',
 424                             name:'teamwork',
 425                             fieldLabel:'Teamwork',
 426                             value:5,
 427                             minValue: 1,
 428                             maxValue: 10
 429                         }]
 430                     }]
 431                 }],
 432                 buttons:[{
 433                     text:'Cancel',
 434                     width:80,
 435                     handler:function() {
 436                         this.up('window').close();
 437                     }
 438                 },
 439                 {
 440                     text:'Save',
 441                     width:80,
 442                     handler:function(btn, eventObj) {
 443                         var window = btn.up('window');
 444                         var form = window.down('form').getForm();
 445
 446                         if (form.isValid()) {
 447                             window.getEl().mask('saving data...');
 448                             var vals = form.getValues();
 449                             var employeeStore = Ext.data.StoreMgr.lookup('employeeStore');
 450                             var currentEmployee = employeeStore.findRecord('id', vals['employee_id']);
 451
 452                             // look up id for this employee to see if they already exist
 453                             if(vals['employee_id'] && currentEmployee) {
 454                                 currentEmployee.set('first_name', vals['first_name']);
 455                                 currentEmployee.set('last_name', vals['last_name']);
 456                                 currentEmployee.set('title', vals['title']);
 457
 458                                 var currentReview = Ext.data.StoreMgr.lookup('reviewStore').findRecord('employee_id', vals['employee_id']);
 459                                 currentReview.set('review_date', vals['review_date']);
 460                                 currentReview.set('attendance', vals['attendance']);
 461                                 currentReview.set('attitude', vals['attitude']);
 462                                 currentReview.set('communication', vals['communication']);
 463                                 currentReview.set('excellence', vals['excellence']);
 464                                 currentReview.set('skills', vals['skills']);
 465                                 currentReview.set('teamwork', vals['teamwork']);
 466                             } else {
 467                                 var newId = employeeStore.getCount() + 1;
 468
 469                                 employeeStore.add({
 470                                     id: newId,
 471                                     first_name: vals['first_name'],
 472                                     last_name: vals['last_name'],
 473                                     title: vals['title']
 474                                 });
 475
 476                                 Ext.data.StoreMgr.lookup('reviewStore').add({
 477                                     review_date: vals['review_date'],
 478                                     attendance: vals['attendance'],
 479                                     attitude: vals['attitude'],
 480                                     communication: vals['communication'],
 481                                     excellence: vals['excellence'],
 482                                     skills: vals['skills'],
 483                                     teamwork: vals['teamwork'],
 484                                     employee_id: newId
 485                                 });
 486                             }
 487                             window.getEl().unmask();
 488                             window.close();
 489                         }
 490                     }
 491                 }]
 492             }); // end Ext.apply
 493
 494             App.ReviewWindow.superclass.constructor.call(this, config);
 495
 496         } // end constructor
 497
 498     });
 499
 500
 501     // adds a record to the radar chart store and
 502     // creates a series in the chart for selected employees
 503     function refreshRadarChart(employees) {
 504         employees = employees || []; // in case its called with nothing we'll at least have an empty array
 505         var existingRadarChart = Ext.getCmp('radarchart'); // grab the radar chart component (used down below)
 506         var reportsPanel = Ext.getCmp('reportspanel'); // grab the reports panel component (used down below)
 507         var dynamicSeries = []; // setup an array of chart series that we'll create dynamically
 508
 509         for(var index = 0; index < employees.length; index++) {
 510             var fullName = employees[index].get('first_name') + ' ' + employees[index].get('last_name');
 511             var eid = 'eid_' + employees[index].get('id');
 512
 513             // add to the dynamic series we're building
 514             dynamicSeries.push({
 515                 type: 'radar',
 516                 title: fullName,
 517                 xField: 'metric',
 518                 yField: eid,
 519                 labelDisplay: 'over',
 520                 showInLegend: true,
 521                 showMarkers: true,
 522                 markerCfg: {
 523                     radius: 5,
 524                     size: 5
 525                 },
 526                 style: {
 527                     'stroke-width': 2,
 528                     fill: 'none'
 529                 }
 530             });
 531
 532         } // end for loop
 533
 534         // create the new chart using the dynamic series we just made
 535         var newRadarChart = new App.PerformanceRadar({series:dynamicSeries});
 536         // mask the panel while we switch out charts
 537         reportsPanel.getEl().mask('updating chart...');
 538         // destroy the existing chart
 539         existingRadarChart.destroy();
 540         // display the new one
 541         reportsPanel.add(newRadarChart);
 542         // un mask the reports panel
 543         reportsPanel.getEl().unmask();
 544     }
 545
 546     function refreshEmployeeDetails(employees) {
 547         var detailsPanel = Ext.getCmp('detailspanel');
 548         var reviewStore = Ext.data.StoreMgr.lookup('reviewStore');
 549         var items = [];
 550
 551         for(var index = 0; index < employees.length; index++) {
 552             var templateData = Ext.merge(employees[index].data, reviewStore.findRecord('employee_id', employees[index].get('id')).data);
 553             var employeePanel = new App.EmployeeDetail({
 554                 title:employees[index].get('first_name') + ' ' + employees[index].get('last_name'),
 555                 data:templateData // combined employee and latest review dataTransfer
 556             });
 557             items.push(employeePanel);
 558         }
 559
 560         detailsPanel.getEl().mask('updating details...');
 561         detailsPanel.removeAll();
 562         detailsPanel.add(items);
 563         detailsPanel.getEl().unmask();
 564     }
 565
 566     // sets Up Checkbox Selection Model for the Employee Grid
 567     var checkboxSelModel = new Ext.selection.CheckboxModel();
 568
 569     var viewport = new Ext.container.Viewport({
 570         id:'mainviewport',
 571         layout: 'border',            // sets up Ext.layout.container.Border
 572         items: [{
 573             xtype:'panel',
 574             region:'center',
 575             layout:'auto',
 576             autoScroll:true,
 577             title:'Employee Performance Manager',
 578             tbar:[{
 579                 text:'Add Employee',
 580                 tooltip:'Add a new employee',
 581                 iconCls:'add',
 582                 handler:function() {       // display a window to add a new employee
 583                     new App.ReviewWindow().show();
 584                 }
 585             }],
 586             items:[{
 587                 xtype:'grid',
 588                 store:Ext.data.StoreMgr.lookup('employeeStore'),
 589                 height:300,
 590                 columns:[{
 591                     text:'First Name',
 592                     dataIndex:'first_name',
 593                     flex:2
 594                 },
 595                 {
 596                     text:'Last Name',
 597                     dataIndex:'last_name',
 598                     flex:2
 599                 },
 600                 {
 601                     text:'Title',
 602                     dataIndex:'title',
 603                     flex:3
 604                 },
 605                 {
 606                     xtype:'actioncolumn',
 607                     width:45,
 608                     items:[{
 609                         icon:'images/edit.png',
 610                         tooltip:'Edit Employee',
 611                         handler:function(grid, rowIndex, colIndex) {
 612                               var employee = grid.getStore().getAt(rowIndex);
 613                               var review = reviewStore.findRecord('employee_id', employee.get('id'));
 614                               var win = new App.ReviewWindow({hidden:true});
 615                               var form = win.down('form').getForm();
 616                               form.loadRecord(employee);
 617                               form.loadRecord(review);
 618                               win.show();
 619                         }
 620                     },
 621                     {
 622                         icon:'images/delete.png',
 623                         tooltip:'Delete Employee',
 624                         width:75,
 625                         handler:function(grid, rowIndex, colIndex) {
 626                             Ext.Msg.confirm('Remove Employee?', 'Are you sure you want to remove this employee?',
 627                                 function(choice) {
 628                                     if(choice === 'yes') {
 629                                         var reviewStore = Ext.data.StoreMgr.lookup('reviewStore');
 630
 631                                         var employee = grid.getStore().getAt(rowIndex);
 632                                         var reviewIndex = reviewStore.find('employee_id', employee.get('id'));
 633                                         reviewStore.removeAt(reviewIndex);
 634                                         grid.getStore().removeAt(rowIndex);
 635                                     }
 636                                 }
 637                             );
 638                         }
 639                     }]
 640                 }],
 641                 selModel: new Ext.selection.CheckboxModel(),
 642                 columnLines: true,
 643                 viewConfig: {stripeRows:true},
 644                 listeners:{
 645                     selectionchange:function(selModel, selected) {
 646                         refreshRadarChart(selected);
 647                         refreshEmployeeDetails(selected);
 648                     }
 649                 }
 650             },{
 651                 xtype:'container',
 652                 id:'detailspanel',
 653                 layout:{
 654                     type:'vbox',
 655                     align:'stretch',
 656                     autoSize:true
 657                 }
 658             }]
 659         },{
 660             xtype:'panel',          // sets up the chart panel (starts collapsed)
 661             region:'east',
 662             id:'reportspanel',
 663             title:'Performance Report',
 664             width:350,
 665             layout: 'fit',
 666             items:[{
 667                 xtype:'performanceradar'  // this instantiates a App.PerformanceRadar object
 668             }]
 669         }]  // mainviewport items array ends here
 670     });
 671
 672 });