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