PDA

View Full Version : extjs 4 Paging with remote json data



bibble
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";
break;


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


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


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

// Data is temporarily hardcoded
var returnedData = Json(
new ExtJsResponse<PersontViewModel>(
new PersonViewModel[]
{
new PersonViewModel
{
FirstName = foreName,
MiddleName = MidName,
Surname = Lastname
}
}
),
JsonRequestBehavior.AllowGet);



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',
itemid:'newsearch',
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
dispatcher.onSearchBackbutton(dispatcher);
}
}]
});

Any help would be greatly appreciated.

Thanks...

mitchellsimoens
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.

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