PDA

View Full Version : Pagination is not working in the grid.



chandanmahajan
29 Dec 2010, 6:02 AM
We are using 3.2.1 version of Extjs.

I am new in ExtJS technology and need some help for the implementation of pagination in the gridpanel.
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}});
});


Please let me know how to move ahead now.

Condor
29 Dec 2010, 6:49 AM
For local paging I recommend using my PagingStore user extension (see User Extensions forum).

chandanmahajan
29 Dec 2010, 7:11 AM
Thanks for the quick reply.

Could you please point me to an example where PagingStore is used? so that i can download the example and will try to use in my application.

Thanks in advance.

Condor
29 Dec 2010, 7:34 AM
Link (http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5).

chandanmahajan
29 Dec 2010, 7:39 AM
Thanks a lot,
Really appricate your quick reply.

I am very new to this technology. I need an example where this has been used. I am not sure how to use this in my example. I mean how to create an jsonstore object using this files. I need a complete example where this has been properly implemented.

Thanks in advance again.

Regards,
Chandan

Condor
29 Dec 2010, 7:47 AM
1. Include PagingStore.js
2. Replace JsonStore with PagingJsonStore
3. Add to the store: lastOptions:{params: {start: 0, limit: 5}}
4. Remove: gridStore.load({params:{start:0, limit:5}});
5. Optionally: Replace Ext.PagingToolbar with Ext.ux.PagingToolbar

chandanmahajan
29 Dec 2010, 10:27 PM
Hi Condor,

Thanks a lot of for you responses. I am still facing the problem. I have pasted my code here.

Ext.onReady(function() {
var myData = {
total: 14,
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.ux.data.PagingStore ({
fields : fields,
//data : myData,
root : 'records',
idProperty: 'column1',
lastOptions:{params: {start: 0, limit: 5}}
});
// 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.ux.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');

});


It is still now showing the records.

Also Please answer my following question.

The example I have seen and implementing for the pagination Ext.PagingToolbar, I require the jstonstore object in the following format. i.e.

var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote.php'
})
});


I really want to know for pagination is it required to fetch the data only throgh url i.e. proxy.

Can not we write the static jston store object which contain the data in the form array and assign that store object to standard pagingtoolbar as given in the above example ?

Condor
30 Dec 2010, 12:02 AM
You didn't follow my description. It should be:

var gridStore = new Ext.ux.data.PagingJsonStore({
fields : fields,
data : myData,
root : 'records',
idProperty: 'column1',
lastOptions: {params: {start: 0, limit: 5}}
});

chandanmahajan
30 Dec 2010, 12:25 AM
Hi condor,

Thanks. I have done the changes but still it is showing this.reader is null or not an object error in pagingstore.js at line 232.

It would be great if you attached simple example with the zip file. I will make an appropriate chagnes in my project then.

Condor
30 Dec 2010, 12:40 AM
Are you SURE you are using a PagingJsonStore now?