extjs/examples/classic/grid/buffer-grid.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.data.*',
   4     'Ext.util.*'
   5 ]);
   6
   7 Ext.define('Employee', {
   8     extend: 'Ext.data.Model',
   9     fields: [{
  10         name: 'employeeNo'
  11     }, {
  12         name: 'rating',
  13         type: 'int'
  14     }, {
  15         name: 'salary',
  16         type: 'float'
  17     }, {
  18         name: 'name',
  19         convert: function (value, record) {
  20             return record.get('forename') + ' ' + record.get('surname');
  21         }
  22     }, {
  23         name: 'forename'
  24     }, {
  25         name: 'surname'
  26     }, {
  27         name: 'email'
  28     }, {
  29         name: 'department'
  30     }, {
  31         name: 'dob',
  32         type: 'date',
  33         dateFormat: 'Ymd'
  34     }, {
  35         name: 'joinDate',
  36         type: 'date',
  37         dateFormat: 'Ymd'
  38     }, {
  39         name: 'noticePeriod'
  40     }, {
  41         name: 'sickDays',
  42         type: 'int'
  43     }, {
  44         name: 'holidayDays',
  45         type: 'int'
  46     }, {
  47         name: 'holidayAllowance',
  48         type: 'int'
  49     }],
  50     idField: 'employeeNo'
  51 });
  52
  53 Ext.onReady(function() {
  54
  55     function random(from, to) {
  56         return Math.floor(Math.random() * (to - from + 1) + from);
  57     }
  58
  59     function getEmployeeNo() {
  60         var out = '',
  61             i = 0;
  62         for (; i < 6; ++i) {
  63             out += random(0, 7);
  64         }
  65         return out;
  66     }
  67
  68     /**
  69      * Returns an array of fake data
  70      * @param {Number} count The number of fake rows to create data for
  71      * @return {Array} The fake record data, suitable for usage with an ArrayReader
  72      */
  73     function createFakeData(count, data) {
  74         var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
  75             lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
  76             departments  = ['Engineering', 'Sales', 'Marketing', 'Managment', 'Support', 'Administration'],
  77             ratings      = [1, 2, 3, 4, 5],
  78             salaries     = [100, 400, 900, 1500, 1000000],
  79             noticePeriods= ['2 weeks', '1 month', '3 months'],
  80             i;
  81
  82         for (i = 0; i < (count || 25); i++) {
  83             var firstName   = firstNames[random(0, firstNames.length - 1)],
  84                 lastName    = lastNames[random(0, lastNames.length - 1)],
  85                 name        = Ext.String.format("{0} {1}", firstName, lastName),
  86                 email       = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@sentcha.com',
  87                 rating      = ratings[(name === 'Nige White') ? 0 : random(0, ratings.length - 1)],
  88                 salary      = salaries[(name === 'Nige White') ? 4 : random(0, salaries.length - 1)],
  89                 department  = departments[random(0, departments.length - 1)],
  90                 ageInYears  = random(23, 55),
  91                 dob         = new Date(new Date().getFullYear() - ageInYears, random(0, 11), random(0, 31)),
  92                 joinDate    = new Date(new Date() - random(60, 2000) * 1000 * 60 * 60 * 24),
  93                 sickDays    = random(0, 10),
  94                 holidayDays = random(0, 10),
  95                 holidayAllowance = random(20, 40);
  96
  97             data.push({
  98                 employeeNo: getEmployeeNo(),
  99                 rating: rating,
 100                 salary: salary,
 101                 forename: firstName,
 102                 surname: lastName,
 103                 email: email,
 104                 department: department,
 105                 dob: dob,
 106                 joinDate: joinDate,
 107                 sickDays: sickDays,
 108                 holidayDays: holidayDays,
 109                 holidayAllowance: holidayAllowance,
 110                 noticePeriod: noticePeriods[random(0, noticePeriods.length - 1)]
 111             });
 112         }
 113     }
 114
 115     // Create the Data Store.
 116     // Because it is buffered, the automatic load will be directed
 117     // through the prefetch mechanism, and be read through the page cache
 118     var store = Ext.create('Ext.data.Store', {
 119         groupField: 'department',
 120         model: 'Employee'
 121     });
 122
 123     var jumpToRow = function(){
 124         var fld = grid.down('#gotoLine');
 125         if (fld.isValid()) {
 126             grid.view.bufferedRenderer.scrollTo(fld.getValue() - 1, true);
 127         }
 128     };
 129
 130     var data = [],
 131         perBatch = 1000,
 132         max = 5000;
 133
 134     var grid = Ext.create('Ext.grid.Panel', {
 135         width: 700,
 136         height: 500,
 137         title: 'Buffered Grid of 5,000 random records',
 138         store: store,
 139         loadMask: true,
 140         selModel: {
 141             pruneRemoved: false
 142         },
 143         viewConfig: {
 144             trackOver: false
 145         },
 146         features: [{
 147             ftype: 'groupingsummary',
 148             groupHeaderTpl: '{columnName}: {name}',
 149             showSummaryRow: false
 150         }],
 151         // grid columns
 152         columns:[{
 153             xtype: 'rownumberer',
 154             width: 40,
 155             sortable: false
 156         }, {
 157             text: 'Id',
 158             sortable: true,
 159             dataIndex: 'employeeNo',
 160             groupable: false,
 161             width: 70
 162         }, {
 163             text: 'Name',
 164             sortable: true,
 165             dataIndex: 'name',
 166             groupable: false,
 167             width: 120
 168         }, {
 169             text: 'Date of birth',
 170             dataIndex: 'dob',
 171             xtype: 'datecolumn',
 172             groupable: false
 173         }, {
 174             text: 'Join date',
 175             dataIndex: 'joinDate',
 176             xtype: 'datecolumn',
 177             groupable: false
 178         }, {
 179             text: 'Notice period',
 180             dataIndex: 'noticePeriod'
 181         }, {
 182             text: 'Email address',
 183             dataIndex: 'email',
 184             width: 200,
 185             groupable: false,
 186             renderer: function(v) {
 187                 return '<a href="mailto:' + v + '">' + v + '</a>';
 188             }
 189         }, {
 190             text: 'Department',
 191             dataIndex: 'department',
 192             hidden: true
 193         }, {
 194             text: 'Absences',
 195             columns: [{
 196                 text: 'Illness',
 197                 dataIndex: 'sickDays',
 198                 width: 60,
 199                 groupable: false
 200             }, {
 201                 text: 'Holidays',
 202                 dataIndex: 'holidayDays',
 203                 width: 70,
 204                 groupable: false
 205             }, {
 206                 text: 'Holiday Allowance',
 207                 dataIndex: 'holidayAllowance',
 208                 width: 125,
 209                 groupable: false
 210             }]
 211         }, {
 212             text: 'Rating',
 213             width: 70,
 214             sortable: true,
 215             dataIndex: 'rating',
 216             groupable: false
 217         }, {
 218             text: 'Salary',
 219             width: 110,
 220             sortable: true,
 221             dataIndex: 'salary',
 222             align: 'right',
 223             renderer: Ext.util.Format.usMoney,
 224             groupable: false
 225         }],
 226         bbar: [{
 227             labelWidth: 80,
 228             fieldLabel: 'Jump to row',
 229             xtype: 'numberfield',
 230             minValue: 1,
 231             maxValue: max,
 232             allowDecimals: false,
 233             itemId: 'gotoLine',
 234             enableKeyEvents: true,
 235             listeners: {
 236                 specialkey: function(field, e){
 237                     if (e.getKey() === e.ENTER) {
 238                         jumpToRow();
 239                     }
 240                 }
 241             }
 242         }, {
 243             text: 'Go',
 244             handler: jumpToRow
 245         }],
 246         renderTo: Ext.getBody()
 247     });
 248
 249     function makeData() {
 250         createFakeData(perBatch, data);
 251         if (data.length < max) {
 252             setTimeout(makeData, 10);
 253         } else {
 254             grid.el.unmask();
 255             store.loadData(data);
 256         }
 257     }
 258
 259     grid.el.mask('Generating fake data...');
 260
 261     // In old IE, the fake data loop can cause a slow script warning,
 262     // so kick this off in the "background" to load the data in chunks.
 263     makeData();
 264 });