View Full Version : Force grid pagination with all data from a server.

8 Jun 2012, 8:31 AM
Hello all. I apologize for the awkward title, but I didn't know how else to word it.

Anyway, I have a store that loads thousands of records from a backend call, but when I try to populate my grid with this store, there's quite a bit of lag. I realize there's pagination, which will only show n number of rows and make the appropriate call to your backend when you go to the next page, but what I want to do is load all of the records from the backend and have the grid only display n number rows.

I don't have access to the code right now, so I was hoping someone could shed some insight. But as my app sits right now... I have a store that makes an AJAX call to my backend which returns all of the records to the store (this part works). It's good to note that I set the pageSize property in the store to 100, but it's not doing anything on the backend.

Next, I set up a PagingToolbar with pageSize 100 and added that to my grid. When I visit my app, the JSON gets collected, and then it hangs for quite a while because the grid is populated. After the grid is populated, the PagingToolbar displays the right information... I have the correct total and amount of pages, but all of my records are in the grid, thus making the PagingToolbar worthless. Is there anyway to force the display of 100 records, or do I literally have to do this all on the backend?

8 Jun 2012, 9:40 AM
Per the paging toolbar page (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging) (in the "Paging with Local Data" section), I guess the best way to accomplish this is create a store with a 'pagingmemory' proxy and then populate it with an Ajax call. I've tried doing this, but it still doesn't create a paging store... I was wondering if anyone had an example of using 'pagingmemory' and loading data into a local store?

11 Jun 2012, 6:15 AM
I've been working with the following code

enabled: true

Ext.Loader.setPath('Ext.ux', 'examples/ux');

Ext.onReady(function() {
var data = [
{name: 'john smith', phone: '4562135'},
{name: 'blah blah', phone: '4445220'}

Ext.define('model', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'phone', type: 'string'}

Ext.define('mystore', {
extend: 'Ext.data.Store',
model: 'model',
proxy: {
type: 'pagingmemory'
extraParams: {
start: 0,
limit: 1
//data: data,
pageSize: 1,
remoteSort: false

Ext.define('mygrid', {
extend: 'Ext.grid.Panel',
store: Ext.create('mystore'),
id: 'grid',
initComponent: function() {
this.store.loadData([{name: 'john smith', phone: '4562135'}, {name: 'blah blah', phone: '4445220'}]);
this.dockedItems = [{
xtype: 'pagingtoolbar',
store: this.store,
dock: 'bottom',
displayInfo: true
columnLines: true,
height: 700,
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1,
align: 'center'
}, {
header: 'Phone',
dataIndex: 'phone',
flex: 1,
align: 'center'

Ext.create('Ext.Viewport', {
layout: 'border',
title: 'My viewport!',
items: [{
region: 'center',
items: [Ext.create('mygrid')]

The relevant information is highlighted in red. If I uncomment adding the data in 'mystore', and comment out loading the data in the initComponent, the paging store works. But let's say I'm pulling data from an AJAX call and want to add it after the AJAX call completes, so I have to use loadData, but the problem with that is... it seems to just add all of the records to the grid without doing the pagination. Is there a way to fix this?