examples/grid/buffer-grid.js

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