PDA

View Full Version : Ext js buffered grid (infinite scroll) not rendering first page on scrolling



sudhanshusekhar27
4 Nov 2014, 1:01 AM
Hi these are my code


Ext.define('Test.store.TestStore', {
extend : 'Ext.data.Store',
storeId : 'teststore',
model: 'Test.model.TestModel',
remoteGroup: true,
remoteFilter: true,
remoteSort: true,
buffered: true,
trailingBufferZone: 500,
leadingBufferZone: 500,
purgePageCount : 5,
pageSize: 500,
autoSync: true,
clearOnPageLoad:false,
clearRemovedOnLoad : true,
proxy: {
type: 'ajax',
url: ajaxUrl,
reader: {
root: 'skus',
totalProperty: 'totalCount'
},
extraParams :{
max : 500000
},
simpleSortMode: true,
simpleGroupMode: true,
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'item',
direction: 'ASC'
}],
autoLoad: true
});





Ext.define('Test.model.TestModel', {
extend : 'Ext.data.Model',
fields : [ 'item', 'loc', 'oh', 'replenType','ohPost', {
name : 'id',
type : 'int'
},'qty','cur', 'store','enable','time','minRule', 'targetRule', 'infiniteSply', 'creationdate', 'dept', 'planlevel' ],
idProperty : 'id'
});


Ext.define('Test.view.TestGrid', {
extend : 'Ext.grid.Panel',
alias : 'widget.infinitegrid',
requires : ['Ext.grid.plugin.BufferedRenderer'],
collapsible : true,
forceFit : true,
autoHeight : true,
store : 'TestStore',
disableSelection: true,
loadMask : true,
selModel : {
pruneRemoved : false
},
multiSelect : true,
viewConfig : {
trackOver : false
},
features : [ {
ftype : 'grouping',
hideGroupedHeader : false
} ],
verticalScroller : {
variableRowHeight : true
},
// grid columns
columns : [{
text : 'Index',
dataIndex : 'id'
},{
text : "Item",
dataIndex : 'item',
filter : true,
width : 100,
sortable : true
}, {
text : "Location",
dataIndex : 'loc',
//locked : true,
width : 100,
sortable : true
}, {
text : "OH",
dataIndex : 'oh'
}, {
text : 'Replen Type',
dataIndex : 'replenType'
}, {
text : 'OH Post',
dataIndex : 'ohPost'
},{
text : 'Quantity',
dataIndex : 'qty'
},{
text : 'Curr',
dataIndex : 'cur'
},{
text : 'Store',
dataIndex : 'store'
},{
text : 'Enable',
dataIndex : 'enable'
},{
text : 'Time',
dataIndex : 'time'
},{
text : 'Min Rule',
dataIndex : 'minRule'
},{
text : 'Target Rule',
dataIndex : 'targetRule'
},{
text : 'Infinite Supply',
dataIndex : 'infiniteSply'
},{
text : 'Created On',
dataIndex : 'creationdate'
},{
text : 'Dept',
dataIndex : 'dept'
},{
text : 'Plan Level',
dataIndex : 'planlevel'
}
]
});
This is my code. I am using a buffered store to get the infinite scrolling for ext js grid.
It's happening absolutely fine but when i am scrolling down and again going to 1st page then the first page is not rendering though it is making a server call to get the 1st page data and server sucessfully returning the 1st page records.
Any idea what could be wrong in here?

slemmon
5 Nov 2014, 1:53 PM
What version of ExtJS are you testing with?
Are you seeing any errors thrown in the console?

sudhanshusekhar27
10 Nov 2014, 4:53 AM
I am using Ext Js 4.2
I am not seeing any error in the console. Even the proxy call made to the sever is also returning records for the requested page.

slemmon
11 Nov 2014, 1:09 PM
The issue doesn't sound familiar. Though have you tested using the latest GA release in 4.x; 4.2.1?