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