PDA

View Full Version : Buffered Store + Grid reconfigure, nothing happens



lenny87
17 Jun 2013, 5:05 AM
ExtJS 4.1.1, I have a buffered store which has a page size of 150 and I have a guarantee range of 150 also. I dynamically add new items to the store and call a reconfigure on the grid which houses the store.

There are no errors in my code and from looking in the console I can see that the store for the grid is updating, however the new data is not rendered into the grid.

Can anyone explain why?

Regards,

Andrew

slemmon
18 Jun 2013, 5:54 PM
The below test case seemed to work for me in 4.1.1 as well as 4.2.1.

data 1


[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]


data 2


[
{"name":"Matthew", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Mark", "email":"bart@simpsons.com", "phone":"555-222-1234"},
{"name":"Luke", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"John", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]


test code


Ext.define('test.model.TestModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'idfield', type: 'string' },
{ name: 'rating', type: 'int' },
{ name: 'salary', type: 'int' },
{ name: 'name', type: 'string' }
],

proxy: {
type: 'ajax',
url: 'data/json.json',
reader: {
type: 'json',
root: 'records'
}
}
});




Ext.define('test.store.TestStore', {
extend: 'Ext.data.Store',
model: 'test.model.TestModel',

autoLoad: true,
buffered: true,
leadingBufferZone: 300,
pageSize: 100
});


Ext.define('test.model.TestModel2', {
extend: 'Ext.data.Model',
fields: [
{ name: 'idfield', type: 'string' },
{ name: 'rating', type: 'int' },
{ name: 'salary', type: 'int' },
{ name: 'name', type: 'string' }
],

proxy: {
type: 'ajax',
url: 'data/json2.json',
reader: {
type: 'json',
root: 'records'
}
}
});




Ext.define('test.store.TestStore2', {
extend: 'Ext.data.Store',
model: 'test.model.TestModel2',

autoLoad: true,
buffered: true,
leadingBufferZone: 300,
pageSize: 100
});




var store1 = Ext.create('test.store.TestStore');
var store2 = Ext.create('test.store.TestStore2');




var myColumns = [
{ text: 'ID', dataIndex: 'idfield', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 1 },
{ text: 'Rating', dataIndex: 'rating', flex: 1 },
{ text: 'Salary', dataIndex: 'salary', flex: 1 }
];




Ext.define('test.view.grid.TestGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.testgridpanel',

width: 800,
height: 500,
title: 'Some random data',
store: store1,
loadMask: true,
selModel: { pruneRemoved: false },
//plugins: [{ ptype: 'bufferedrenderer' }],
columns: myColumns,

tbar: ['->',
{
xtype: 'button',
text: 'Reconfigure',
itemId: 'reconfigure',
handler: function() {
var panel = this.up('testgridpanel');
store2.load();
panel.reconfigure(store2);
}
},
{
xtype: 'button',
text: 'Revert',
itemId: 'revert',
handler: function() {
var panel = this.up('testgridpanel');
store1.load();
panel.reconfigure(store1);
}
}
]
});




Ext.widget('testgridpanel', {
renderTo: Ext.getBody()
});

lenny87
19 Jun 2013, 7:43 AM
I would expect that test case to work. Mine is slightly different in that the store is full of data, items have been updated or inserted into new areas and the reconfigure just doesn't reload the grid with the new items.

I have managed to get round the issue in that my view size was less than the page size, therefore there was issues with the grid handling updates.

Thanks for your response. I have a further question relating to prefetched data, can anyone explain if its possible to add all prefetched data to the store? I have a requirement to have live updates and I don't want to have to retrieve data from the server every time an update occurs to items which are prefetched and not in my store.

Thanks in advance.

slemmon
19 Jun 2013, 4:13 PM
To clarify, you're wanting to populate the store with all of the records available not just the buffered portion?

lenny87
20 Jun 2013, 5:50 AM
Well I would like to be able to manipulate all data which has been returned into the pageMap. I am starting to see that this may be impossible though.

lenny87
25 Jun 2013, 3:43 AM
Seems I may be stuck with calls to the server for new data. I gather I can move to EXTJS4.2 which will have improvements to grids and buffered stores, however for sorting on a field such as 'lastchanged' then I will need to go to the server still to get the latest data. With buffering and paging these requests are not large, however its not the solution I was after.

slemmon
25 Jun 2013, 2:57 PM
With 4.2.x you can use a standard store (which lets you drop down from the server as many records as you please and sort / filter locally) and just use the grid bufferedrenderer plugin to manage how many records are displayed at a given time.

lenny87
26 Jun 2013, 1:41 AM
thanks for the help slemmon, we are now currently deciding the past way forward for our application.

tvanzoelen
26 Jun 2013, 4:25 AM
Since 4.1.2 there is a better bufferedgrid handling. Before I switched to the new buffredgrid plugin I used this function to reconfigure the grid with new data



reloadBufferedStore: function(grid, rawData, model, response) {

var self = this.screen;

var cachedStore = grid.store;

var data = rawData;

if ((response != undefined) && (rawData == undefined)) {

data = [];

var resp = Ext.decode(response.responseText);
data = resp.data;
}

if (data) {

var length = data.length;

var newStore = Ext.create('as.bufferedstore', {
buffered: true,
model: model,
data: data,
pageSize: data.length,
purgePageCount: 0,
remoteSort: false,
proxy: {
type: 'memory'
}
});

newStore.sort(cachedStore.getSorters());

grid.reconfigure(newStore);

if (data.length > 80) {
newStore.guaranteeRange(0, 40);
}

}


}