Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs-4.2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs-4.2.0/ext-all-dev.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.1a-gpl/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.1a-gpl/ext-all.js"></script>-->
<style type="text/css">
body
{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
}
});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*'
]);
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{ name: 'rating', type: 'int' },
{ name: 'salary', type: 'float' },
{ name: 'name' }
]
});
var grid;
var reloadRows = 1;
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: Ext.id(),
rating: rating,
salary: salary,
name: name
});
}
return data;
}
// Create the Data Store.
// Because it is buffered, the automatic load will be directed
// through the prefetch mechanism, and be read through the page cache
var store = Ext.create('Ext.data.Store', {
id: 'store',
// allow the grid to interact with the paging scroller by buffering
//buffered: true,
// Configure the store with a single page of records which will be cached
pageSize: 50000,
data: [],
model: 'Employee',
proxy: {
type: 'memory'
}
});
grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 150,
draggable: true,
resizable: true,
plugins: 'bufferedrenderer',
title: 'Bufffered Grid of 5,000 random records',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
// grid columns
columns: [{
xtype: 'rownumberer',
width: 40,
sortable: false
}, {
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: 'grid-example',
listeners: {
'afterrender': function (comp) {
comp.getView().getEl().on('scroll', function () {
console.log('scroll');
});
}
}
});
store.loadRawData(createFakeData(2));
Ext.defer(function () {
reload();
}, 1000);
function reload() {
store.add(createFakeData(1));
Ext.defer(function () {
reload();
}, 1000);
}
});
</script>
<title>Ext JS Grid</title>
</head>
<body></body>
</html>
New BufferedRenderer Grid plugin does not work properly when editing store.
Reply With Quote
