PDA

View Full Version : How to create Infinite Scrolling grid within Asp.net?



hrnetone
5 Sep 2011, 7:16 PM
I have followed the sample of infinite-scroll.js (http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/infinite-scroll.js) to create an infinite scrolling grid.
I am using a small number of records to test.

The asp.net webmethod returns a json type data set with 14 records each time.
However, in the grid, it only display the first 14 records. No matter how I scroll,
the rest records don't appear.

Below is my setup:

Ext.onReady(function() { //**********Define a Model***********
Ext.define('SourcinglistModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'SourcingID', type: 'int' }],
idProperty: 'SourcingID'
});
//**********end*********************
//
//**********Define a Store***********
gridStore = Ext.create('Ext.data.Store', {
id: 'gridstore',
pageSize: 14,
model: 'SourcinglistModel',
autoLoad:false,
remoteSort: true,
buffered: true, // allow the grid to interact with the paging scroller by buffering
proxy:{
type: 'ajax',
url: 'CandidateSourcingListNew3.aspx/GetSourcingList',
extraParams: {
'positionId': POSITIONID
},
reader: {
root: 'd.Records',
totalProperty: 'd.RowCount'
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
} ,
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'Tag',
direction: 'DESC'
}]
});
//**********end*********************************
//
//**********Create a grid***********
grid = Ext.create('Ext.grid.Panel', {
width: '100%',
height: 200,
title: 'Sourcing List for Position',
store: gridStore,
loadMask: true,
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection: true,
viewConfig: {
trackOver: false
//stripeRows: true
},
columns:[
{xtype: 'rownumberer',width: 24, sortable: false},
{header: "Candidate", dataIndex: 'CanCode', id: 'CanCode', width: 90, sortable: true}],

renderTo: Ext.getBody()
});
//**********end*********************************
//
//**********Load data into grid*****************
gridStore.guaranteeRange(0, 13);

skirtle
6 Sep 2011, 2:56 AM
Can you check whether there are any HTTP requests being sent for the extra data? If there are, do the responses contain the right data?

Is the scrollbar sized correctly for your total number of records? Is d.RowCount definitely correct? It should contain the total number of records.

Could you post the JSON returned by your server to load the first page?

hrnetone
6 Sep 2011, 5:03 PM
Hi skirtle,

Thanks for your replying.

Yesterday, I figured it out that everything including extra data and responsed json data is correct.

The problem is "small number" of data records.
For the "pageSize", it has to be a "BIG" number.