PDA

View Full Version : Can I use a memory proxy as a data source for infinite scrolling



kashim
21 Nov 2011, 8:12 AM
I would like to know, as the grid.Panel is a bit slow to render alot of data, I thought it might be a good idea to render just a few rows from my large initial data array. Then during a scroll event I can add more rows to the grid.
Here is a simple code example of what i'm talking about.


var column_array = ["COL1", "COL2", "COL3", "COL4", "COL5", "COL6"];var data_array = [
["ROW0", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW1", "0001", undefined, "something", "House", "St"],
["ROW2", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW3", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW4", "0001", undefined, "something", "House", "St"],
["ROW5", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW6", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW7", "0001", undefined, "something", "House", "St"],
["ROW8", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW9", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW10", "0001", undefined, "something", "House", "St"],
["ROW11", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW12", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW13", "0001", undefined, "something", "House", "St"],
["ROW14", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW15", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW16", "0001", undefined, "something", "House", "St"],
["ROW17", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW18", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW19", "0001", undefined, "something", "House", "St"],
["ROW20", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"],
["ROW21", "CARR01", "ADDRESS1", "Mr R Jones", "Oak Way", undefined],
["ROW22", "0001", undefined, "something", "House", "St"],
["ROW23", "SH0000573", "ADDRESS1", "Mr P Drop", "50 Raikeswood", "Skipton"]
];


var page_size = 5;
var initial_data = Ext.Array.toArray(data_array, 0, page_size);


// model
Ext.define('Model1', {
extend: 'Ext.data.Model',
fields: column_array
});


//datastore
var store = Ext.create('Ext.data.ArrayStore', {
storeId: 'testTable',
model: 'Model1',
data: initial_data
});


//panel
var grid = Ext.create('Ext.grid.Panel', {
title: 'Testing',
store: store,
columns: [
{ text: 'Col1', dataIndex: 'COL1' },
{ text: 'Col2', dataIndex: 'COL2' },
{ text: 'Col4', dataIndex: 'COL3' },
{ text: 'Col4', dataIndex: 'COL4' },
{ text: 'Col4', dataIndex: 'COL5' }
],
width: 550,
height: 140,
renderTo: Ext.getBody()
});




//add event listener for scrolling
grid.getView().on('bodyscroll', function(event, target) {

if(store.count() < data_array.length) {
if(page_size+6 > data_array.length) {
store.add(Ext.Array.toArray(data_array, page_size));
}
else{
store.add(Ext.Array.toArray(data_array, page_size, page_size+6));
}
page_size = page_size+6;


grid.view.refresh();
}
else{
//remove the event listener for body scroll ..if theres no more data to load
}
});

I was wondering, if I could change this code example to use infinite scrolling using a memory proxy (as opposed to json or any other server proxy)?

thanks
kashim

mitchellsimoens
21 Nov 2011, 9:08 AM
Don't see why not. Have you tried it?

skirtle
21 Nov 2011, 7:54 PM
The memory proxy doesn't support paging, you'd need to use PagingMemoryProxy.

That said, I think what you're trying to do is effectively the Buffered Grid example:

http://cdn.sencha.io/ext-4.0.7-gpl/examples/grid/buffer-grid.html

The problem with that technique is selections. Multiple selection goes a bit crazy if a user holds down Shift and tries to perform a selection across rows that aren't currently visible.

However, it is possible to get single selection to work just by adding the following config:


selModel: {
pruneRemoved: false
}

That prevents the selection being cleared when the selected row scrolls out of view.

kashim
22 Nov 2011, 3:59 AM
thanks skirtle

You're right, the buffered grid example was what I was looking for. Its basically doing what my example is doing but a 100 times better (infinitite scrolling wasn't what i was looking for).


kashim