how to use bufferedrenderer instead of paging toolbar in extjs - extjs

Question

{ extend: 'Ext.grid.Panel',
autoScroll: true,
layout: 'fit',
padding: '5 5 5 0',
width: 450,
selModel: {
mode: 'MULTI',
pruneRemoved: false
},
config: {
labels: {},
defSel: {},
keepSelections: true
},
initComponent: function() {
this.title = this.labels.MEAS_LIST_PANEL_TITLE;
var measStore = Optima.store.Measurement.create();
this.store = measStore;
this.columns = [{
text: 'list',
sortable: true,
dataIndex: 'name',
flex: 1
}, {
text: 'unit'
sortable: true,
dataIndex: 'unit',
flex: 1
}, {
text: 'sample'
sortable: true,
dataIndex: 'sampletime',
flex: 1
}, {
text: 'desc',
sortable: true,
id: 'desc',
dataIndex: 'desc',
flex: 1
}];
this.bbar = {
xtype: 'pagingtoolbar',
pageSize: 25,
store: measStore,
displayInfo: false
};
this.callParent(arguments);
}
});

Answer 1

You should use the buffered store.
Ext.create('Ext.data.BufferedStore', {
storeId: 'exampleStore',
autoLoad : true,
pageSize : 100,
fields: ['userId', 'id', 'title'],
proxy : {
type : 'ajax',
...
}
});
Then get rid of the paging toolbar since the buffered store will automatically page based off page size.

Answer 2

A BufferedStore maintains a sparsely populated map of pages corresponding to an extremely large server-side dataset.
For more details you can refer ExtJS Docs for BufferedStore
I have created an sencha fiddle demo this will show how it is working.
Ext.define('ForumThread', {//Define model
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.BufferedStore', {
model: 'ForumThread',
remoteGroup: true,
leadingBufferZone: 300,
pageSize: 50,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'https://www.sencha.com/forum/remote_topics/index.php',
reader: {
rootProperty: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function (store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function (store, operation) {
if (operation.getGrouper()) {
operation.setSorters(null);
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var grid = Ext.create('Ext.grid.Panel', {
width: '100%',
height: 500,
collapsible: true,
title: 'Buffer grid example with buffer store',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
viewConfig: {
trackOver: false
},
features: [{
ftype: 'grouping',
hideGroupedHeader: false
}],
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
}, {
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
groupable: false,
cellWrap: true,
filter: true
}, {
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true,
groupable: false
}, {
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
filter: {
type: 'numeric'
}
}, {
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i A'),
sortable: true,
groupable: false
}],
renderTo: Ext.getBody()
});