View Full Version : extjs 4 Paging with remote json data

15 Mar 2012, 3:07 AM
I am new to ExJS so please excuse me if my question has been answered before, which I am sure it has...

I am loading some json data remotely into my store. I have enabled paging on the store and added the paging toolbar to the grid. I was hoping I could manage this data on the client side, however it appears from what I have read I need to send params back to my server somehow as the memorypagingproxy only works with inline data code.

I was hoping someone could point me in the right direction of a working example/ code. I have seen what is on the documentation on this site but it seems a little clear and is outside the mvc framework that I have adopted. Not that this necessarily would be any different without MVC.

my code so far

from c# I feed my store for the time being like this, as a proof of concept feeding hardcoded data. I added the pageNo param here but havent found a method that extjs can use this.

public virtual ActionResult Search(SearchCriteriaViewModel searchCriteria, int pageNo)
string foreName = "";
string MidName = "";
string Lastname= "";

switch (pageNo)
case 1:
foreName = "Mark";
MidName = "Jonathan";
Lastname = "Robinson";

case 2:
foreName = "David";
MidName = "Loyd";
Lastname = "Jones";

case 3:
foreName = "Peter";
MidName = "Johnson";
Lastname = "";

case 4:
foreName = "Sue";
MidName = "McSimmons";
Lastname = "";

// Data is temporarily hardcoded
var returnedData = Json(
new ExtJsResponse<PersontViewModel>(
new PersonViewModel[]
new PersonViewModel
FirstName = foreName,
MiddleName = MidName,
Surname = Lastname

return returnedData;

my ExtJS store

var itemsPerPage = 1; // set the number of items you want per page

Ext.define('myApp.store.search.SearchResultsStore', {
extend: 'Ext.data.Store',
model: 'myApp.model.search.Person',
storeId: 'SearchResultsStore',
autoLoad: { start: 1, limit: 1 },
pageSize: itemsPerPage,

proxy: {
type: 'ajax',
url: '/Portal/SearchPortlet/search',
reader: {
type: 'json',
root: 'items'

my ExtJS grid

Ext.define('myApp.view.portlets.search.SearchResultsGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.portlets.search.SearchResultsGrid',
itemid: 'searchresultsgrid',
title: 'Search Results',
autoWidth: true,
autoHeight: true,

columns: [
text: 'First Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'FirstName',
text: 'Middle Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'MiddleName'
text: 'Surname',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'Surname'
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'SearchResultsStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
buttonAlign: 'center',

buttons: [
text: 'New Search',
handler: function () {
var grid = this.up('grid');
var dispatcher = grid.dispatcher; // get the parent dispatcher object for the panel

// Pass the call to the search back button back to the dispatcher

Any help would be greatly appreciated.


15 Mar 2012, 10:34 AM
Yes, by default paging works only with remote data. PagingMemory proxy work with local data so you would just have to get the data to the store.

26 Mar 2012, 10:37 AM
Can you provide idea for local paging for remote json store with using this store in grid?