PDA

View Full Version : buffered Grid and add Data dynamically



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>

scottmartin
25 Jul 2012, 5:18 AM
Please format your code using [ code ] [ /code ] blocks (no spaces)

Scott.

amitayh
28 Jul 2012, 11:23 PM
A few other things I noticed - the row class disappears when scrolling (viewConfig: getRowClass), the grid won't show any data if the number of records is too small and no scrolling is required (I'm using a buffered grid because I don't know in advance how many records will be loaded)

grumpus
4 Oct 2012, 7:05 AM
I also noticed this behavior in ExtJS 4.1.1a

I try to add an item and update the store thusly, but the grid associated with the store doesn't react in any way.



buffered_store.add(item_data);
buffered_store.update();

metalinspired
4 Oct 2012, 8:38 AM
try doing it this way.

grid.getStore().add(item);
grid.getStore().sort();

grumpus
4 Oct 2012, 8:46 AM
Thanks, metalinspired, that works.

Using the following also works:


store.add(data);
store.reload();


I'm not sure which solution is most future-proof, perhaps the one with .sort()

metalinspired
4 Oct 2012, 9:00 AM
If your store is in charge of synchronising with database (and that is usual approach) I think you're safe using .sort() since there is no need to reload data.