examples/grid/buffer-grid.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.Loader.setConfig({enabled: true});
  16
  17 Ext.Loader.setPath('Ext.ux', '../ux/');
  18 Ext.require([
  19     'Ext.grid.*',
  20     'Ext.data.*',
  21     'Ext.util.*',
  22     'Ext.grid.PagingScroller'
  23 ]);
  24
  25 Ext.define('Employee', {
  26     extend: 'Ext.data.Model',
  27     fields: [
  28        {name: 'rating', type: 'int'},
  29        {name: 'salary', type: 'float'},
  30        {name: 'name'}
  31     ]
  32 });
  33
  34 Ext.onReady(function(){
  35     /**
  36      * Returns an array of fake data
  37      * @param {Number} count The number of fake rows to create data for
  38      * @return {Array} The fake record data, suitable for usage with an ArrayReader
  39      */
  40     function createFakeData(count) {
  41         var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
  42             lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
  43             ratings      = [1, 2, 3, 4, 5],
  44             salaries     = [100, 400, 900, 1500, 1000000];
  45
  46         var data = [];
  47         for (var i = 0; i < (count || 25); i++) {
  48             var ratingId    = Math.floor(Math.random() * ratings.length),
  49                 salaryId    = Math.floor(Math.random() * salaries.length),
  50                 firstNameId = Math.floor(Math.random() * firstNames.length),
  51                 lastNameId  = Math.floor(Math.random() * lastNames.length),
  52
  53                 rating      = ratings[ratingId],
  54                 salary      = salaries[salaryId],
  55                 name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
  56
  57             data.push({
  58                 rating: rating,
  59                 salary: salary,
  60                 name: name
  61             });
  62         }
  63         return data;
  64     }
  65     // create the Data Store
  66     var store = Ext.create('Ext.data.Store', {
  67         id: 'store',
  68         pageSize: 50,
  69         // allow the grid to interact with the paging scroller by buffering
  70         buffered: true,
  71         // never purge any data, we prefetch all up front
  72         purgePageCount: 0,
  73         model: 'Employee',
  74         proxy: {
  75             type: 'memory'
  76         }
  77     });
  78
  79
  80
  81     var grid = Ext.create('Ext.grid.Panel', {
  82         width: 700,
  83         height: 500,
  84         title: 'Bufffered Grid of 5,000 random records',
  85         store: store,
  86         verticalScroller: {
  87             xtype: 'paginggridscroller',
  88             activePrefetch: false
  89         },
  90         loadMask: true,
  91         disableSelection: true,
  92         invalidateScrollerOnRefresh: false,
  93         viewConfig: {
  94             trackOver: false
  95         },
  96         // grid columns
  97         columns:[{
  98             xtype: 'rownumberer',
  99             width: 40,
 100             sortable: false
 101         },{
 102             text: 'Name',
 103             flex:1 ,
 104             sortable: true,
 105             dataIndex: 'name'
 106         },{
 107             text: 'Rating',
 108             width: 125,
 109             sortable: true,
 110             dataIndex: 'rating'
 111         },{
 112             text: 'Salary',
 113             width: 125,
 114             sortable: true,
 115             dataIndex: 'salary',
 116             align: 'right',
 117             renderer: Ext.util.Format.usMoney
 118         }],
 119         renderTo: Ext.getBody()
 120     });
 121
 122     var data = createFakeData(5000),
 123         ln = data.length,
 124         records = [],
 125         i = 0;
 126     for (; i < ln; i++) {
 127         records.push(Ext.create('Employee', data[i]));
 128     }
 129     store.cacheRecords(records);
 130
 131     store.guaranteeRange(0, 49);
 132 });
 133
 134
 135