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);
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);