PDA

View Full Version : Reloading Infinite Grid and maintaining the view state.



waqar
17 May 2012, 7:46 AM
Hi All,

When the grid store is reloaded the scroller goes back to the first row, please suggest a way to keep the position of the scroller maintained, I have already added the "invalidateScrollerOnRefresh: false," and "preserveScrollOnRefresh : true" to the code see below but no help from them ...

I am very sure its just a configration problem it must work.. please if any one can have a look ... I am stucked :s

This is the Store :



Ext.create('Ext.data.Store', {
model: 'MtModel',
remoteSort: true,
pageSize: infiniteGridsPageSize, //100 to view
buffered: true,
autoLoad: true,
purgePageCount :0,

proxy: {
type: 'ajax',
url: 'feedingService',
extraParams: {
callType: 'motor',
orderId : '',
venue : ''
},
reader: {
root: 'list',
totalProperty: 'count'
},
simpleSortMode: true
},

listeners: {

}
});



Infinite Grid:


Ext.define("Application.mtInfiniteGrid",{
extend: 'Ext.grid.Panel',
border: false,
flex: .8,
autoScroll: true,
columnLines: true,
frame: true,
forceFit : true,
height: 200,

verticalScroller: {
xtype: 'paginggridscroller',
trailingBufferZone: 50,
leadingBufferZone: 200,
numFromEdge: 30
},

loadMask: false,
disableSelection: true,
invalidateScrollerOnRefresh: false,

viewConfig: {
columnLines : true,
loadingText : undefined,
loadMask : false,
preserveScrollOnRefresh : true
},
initComponent: function() {
this.store = mtStore;
this.columns = this.Columns();
this.setLoading(false,false);
this.callParent();
},
,,
,,
,,,,



Problem:
This Grid autoloads prefectly and scroller works perfect,
But their is new data comming from other station of software in database so I have a poller which polls after every 5 seconds to see if their is new data to show and reloads with new data but the scroller jumps back to the top :s , below is the Code :

Poller Event: (SIMPLIFIED)



Ext.Direct.on('warningStateLogPoll', function(e){

// Not recomended way for 4.1 it was for 4.0
// logEntryGrid.getStore().prefetch({
// start: 0,
// limit: 100,
// callback: function() {
// logEntryGrid.getStore().guaranteeRange(0, 50);
// }
// });

logEntryGrid.getStore().load(); // this load call jumps back the scroller to top row :(
}
});




do share me how can I get this working ....


So far so good, I have ported the project from 4.0.7 to 4.1 and Infinite Grid has started breathing finally and does not miss first rows after scrolling and many other issues.


any guidance will be appriciated.

Cheers!

waqar
17 May 2012, 7:48 AM
the only reason to reload is that there are new records added by other threads of software in DB table and I need to keep the view updated and append new data to the Grid so that user can see new updates ....

SebTardif
22 May 2012, 5:56 PM
I think you posted in the wrong forum. This is Ext JS Core forum, which has not much to do with UI. Also this Ext JS Core forum is under Ext JS 4, and so this Ext JS Core version is not using MIT license. In other words Ext JS Core of Ext JS 4.x is dead and so this forum.

scottmartin
22 May 2012, 7:48 PM
Moved thread.

Scott.

waqar
22 May 2012, 10:08 PM
Problem :
On reload scroller losing state and moving to top.

Solution : ( Which worked for me )

// Poller function

Ext.Direct.on('pollClosePositionDetails', function(e){

// FETCH current postion before load
var scrollPosition = closePositions.getEl().down('.x-grid-view').getScroll();
// call LOAD() of grid store
closePositions.getStore().load(function() {
// move the scroll to orignal position which it was before load
closePositions.getEl().down('.x-grid-view').scrollTo('top', scrollPosition.top, false);
});
});

scroller will now stay at the right position.

jrh0090
5 Jun 2012, 11:58 AM
I was able to get this to work, if it helps anyone


// need to refresh the current rows, without changing the scroll position
var start = store.lastRequestStart,
end = Math.min(store.lastRequestStart + store.pageSize - 1, store.totalCount),
page = store.pageMap.getPageFromRecordIndex(end);
// make sure we do not have the current view records in cache

store.pageMap.removeAtKey(page);
// this will fetch from the server and update the view since we removed it from cache
store.guaranteeRange(start, end, callback, scope);