Paging toolbar for a local data store

[arunknathan]

Hi,

I am new to Ext-JS and I have a requirement in my current project for a paging of a grid based on a local data store.

Could anyone please let me know if this is even possible ?
And, if it is possible, please let me know how. I cannot find such a feature in Ext.PagingToolbar.

Thanks in advance for your time and effort.

[Lonny Zone]

Actually, this is very possible. You can bind the paging toolbar to a GridPanel as you would normally. Then you can extend Ext.data.HttpProxy and override the "load" method.

There, you can make the query to your local db, build your record block, and then pass the record block off to the "callback" parameter that was passed to "load".

I suppose you could extend Ext.data.DataProxy, but I think it'd be easier to extend HttpProxy. Besides, that way you can switch between making requests to a local data source and a remote one.

[mjlecomte]

Paging Memory Proxy?

[arunknathan]

Hi,

I used a javascript function to override the load method of the JsonStore that my GridPanel uses. In that function, I filter the store according to the parameters sent to it which is like,

{'params' : {'start' : '0', 'limit' : '16'}}

start - the index of the next record needed in the store
limit - maximum records that are to be shown in a page

So, the grid displays the filtered records and, voila ! I see the next page.

But, there is a problem. The paging toolbar is unaffected.
That is,
- The page number on the middle of the paging bar is still unchanged, namely, '1'.
- The previous page button and the first page button or still disabled.

So, there is something more to be done here.
Any idea what is it that I am missing ?

By the way, there was no callback function in the parameters sent to the load method of the JsonStore.
Any idea why ?

[Lonny Zone]

You should be extending a DataProxy, such as Ext.data.HttpProxy, not JsonStore. HttpProxy's load method takes a callback as an argument. The callback handles passing loaded the records to your Store.

The call to the callback would look like:

var recordBlock = {
         success: true,
         records: records,
         totalRecords: total
};
            
callback.call(scope, recordBlock, arg, true);

The "totalRecords" member of the record block will give the paging toolbar the information needed for paging.

[arunknathan]

@Mjlecomte:

No, I am using a JsonStore which has a HttpProxy and JsonReader configured internally.
But, the store is just a local store so it doesn't have any 'url' in its config options.
Anyways, I will try to use MemoryProxy also and see if that works good for me.

@Lonny Zone:

I will try to extend DataProxy.
But, I do have a doubt though.
Isn't it possible to accomplish the same using a JsonStore ?

For say,

var jsonStore1 = new Ext.data.JsonStore({
root : 'someRecords',
fields : ['record']
});

jsonStore1.load = function(params){
/*
Use the params to filter the records of the store so that the grid
displays only the records of the requested page.
*/
}

As I have posted earlier the load method is invoked by the paging toolbar but the paging toolbar is not updated about the page transition. Also the 'params' in the load method doesn't contain any callback function object in it.

There is definitely something wierd here.
Any idea on why there is no callback function object in params ?

[chandanmahajan]

I am facing similar problem.
I have some questions on this. I will really appriciate if somebody answers my questions.

1) To implement pagination in extjs, do we alway require to create proxy in jstonstore object?
2) I have to implement pagination on the static data object. I have pasted the code below. However, I am not sure whether i will have to create proxy (HTTPproxy or ..) for it. If yes, how to do it. If somebody give me the right url or paste the sample example here that would be really apriciated.

Here is the code, which is not working as I am expecting.

Ext.onReady(function() {
var myData = {
records : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
{ name : "Record 3", column1 : "3", column2 : "3" },
{ name : "Record 4", column1 : "4", column2 : "4" },
{ name : "Record 5", column1 : "5", column2 : "5" },
{ name : "Record 6", column1 : "6", column2 : "6" },
{ name : "Record 7", column1 : "7", column2 : "7" },
{ name : "Record 8", column1 : "8", column2 : "8" },
{ name : "Record 9", column1 : "9", column2 : "9" },
{ name : "Record 10", column1 : "10", column2 : "10" },
{ name : "Record 11", column1 : "11", column2 : "11" },
{ name : "Record 12", column1 : "12", column2 : "12" },
{ name : "Record 13", column1 : "13", column2 : "13" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records',
idProperty: 'column1'
});
// Column Model shortcut array
var cols = [
{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
];
var paging = new Ext.PagingToolbar({
pageSize: 5, // items per page
store: gridStore,
displayInfo: true,
displayMsg: 'Displaying countries {0} - {1} of {2}', // messages
emptyMsg: 'Country list is empty',
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid1.getView();
view.showPreview = pressed;
view.refresh();
}
}]
});
// declare the source Grid
var grid1 = new Ext.grid.GridPanel({
ddGroup : 'gridDDGroup',
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 650,
height : 325,
region : 'west',
title : 'Data Grid',
bbar: paging,
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
grid1.render('panel');
gridStore.load({params:{start:0, limit:5}});
});

[Condor]

Are you actually using Ext 1 (what this forum is for)?

For Ext 2 and 3 I created a PagingStore extension that takes care of local paging (see User Extension forum).

[optibase]

http://www.sencha.com/forum/showthre...gingStore-v0.5