cyberant
24 Jul 2012, 11:44 PM
Hello,
i want a buffered Grid and change the data of the grid later on runtime for example when the user presses a button. I can add the data normaly with the store.add function but this doesnt seem to use the buffer(loads to long), also store.reconfigure doesnt seem to use the buffer in extjs 4.1.1 (in 4.1.0 it seems to use the buffer but the data appears only after clicking the scrollbar of the grid) - can someone help me?
Ive created a test to reproduce the problem (from your sample page) - please look at the AddData function:
<html>
<head>
<title>Ext JS Calendar Sample</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
]);
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
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
*/
// 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: 5000,
//data: createFakeData(5000),
data: [],
model: 'Employee',
proxy: {
type: 'memory'
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: "testgrid",
width: 700,
height: 500,
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: Ext.getBody()
});
});
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({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
function AddData()
{
alert("start");
//Ext.getCmp("testgrid").store.add(createFakeData(5000));//does not work with buffer
var store = Ext.create('Ext.data.Store', {
id: 'store2',
// 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: 5000,
data: createFakeData(5000),
model: 'Employee',
proxy: {
type: 'memory'
}
});
//Ext.getCmp("testgrid").store = store;//does not work
Ext.getCmp("testgrid").reconfigure(store);//does not work with buffer
Ext.getCmp("testgrid").doLayout();
//Ext.getCmp("testgrid").scrollBy(0, 200, false);
//Ext.getCmp("testgrid").setHeight(200);
//Ext.getCmp("testgrid").getStore().loadRecords(store.getRange());
alert("ende");
//window.setTimeout("Hinweis2()", 2000);
}
window.setTimeout("AddData()", 1000);
</script>
</head>
<body>
</body>
</html>
i want a buffered Grid and change the data of the grid later on runtime for example when the user presses a button. I can add the data normaly with the store.add function but this doesnt seem to use the buffer(loads to long), also store.reconfigure doesnt seem to use the buffer in extjs 4.1.1 (in 4.1.0 it seems to use the buffer but the data appears only after clicking the scrollbar of the grid) - can someone help me?
Ive created a test to reproduce the problem (from your sample page) - please look at the AddData function:
<html>
<head>
<title>Ext JS Calendar Sample</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
]);
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
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
*/
// 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: 5000,
//data: createFakeData(5000),
data: [],
model: 'Employee',
proxy: {
type: 'memory'
}
});
var grid = Ext.create('Ext.grid.Panel', {
id: "testgrid",
width: 700,
height: 500,
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: Ext.getBody()
});
});
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({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
function AddData()
{
alert("start");
//Ext.getCmp("testgrid").store.add(createFakeData(5000));//does not work with buffer
var store = Ext.create('Ext.data.Store', {
id: 'store2',
// 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: 5000,
data: createFakeData(5000),
model: 'Employee',
proxy: {
type: 'memory'
}
});
//Ext.getCmp("testgrid").store = store;//does not work
Ext.getCmp("testgrid").reconfigure(store);//does not work with buffer
Ext.getCmp("testgrid").doLayout();
//Ext.getCmp("testgrid").scrollBy(0, 200, false);
//Ext.getCmp("testgrid").setHeight(200);
//Ext.getCmp("testgrid").getStore().loadRecords(store.getRange());
alert("ende");
//window.setTimeout("Hinweis2()", 2000);
}
window.setTimeout("AddData()", 1000);
</script>
</head>
<body>
</body>
</html>