PDA

View Full Version : Problem in using Paging toolbar with Grid Panel



Sapan
6 Jun 2011, 7:49 AM
Hello,
I am stuck at this point since a long time. Please help me identify my error-
I am trying to show data in grid panel and since data is large I am also using Paging Toolbar. This is my code [I am not sure but I think problem is in store that I am creating.]


var myData = {
record : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
]
};

var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];


var store = new Ext.data.Store ({
id :'simpsonsStore',
fields:['name', 'column1', 'column2'],
pageSize: 5, // items per page
data: myData,
reader: {
root: 'record',
type: 'json'
}
});



// Column Model shortcut array
var cols = [
{ id : 'name', header: "Record Name", width: 50, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
];

store.load({
params:{
start:0,
limit: 5
}
});

// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup : 'gridDDGroup',
store : store,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 650,
height : 325,
region : 'west',
title : 'Data Grid',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true}),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]

});

var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'column',


renderTo : Ext.getBody(),
items : [
grid
],
bbar : [
'->',
{
text : 'Reset Example',
handler : function() {
gridStore.loadData(myData);
}
}
]
});

jay@moduscreate.com
8 Jun 2011, 4:56 AM
What version of the framework are you trying to use? Also, you're posting in the wrong area of the forums!

Sapan
8 Jun 2011, 5:21 AM
I am sorry to post in the wrong area. It would be better if you can give me the right link. My problem is same as sked by anna here (http://stackoverflow.com/q/6276856/760955). I would really appreciate if you could give me the answer to the problem.

jay@moduscreate.com
8 Jun 2011, 5:30 AM
What version of the framework are you trying to use? Also, you're posting in the wrong area of the forums!
See the above question asked again.

Sapan
8 Jun 2011, 5:37 AM
Sorry.
I am using ext-3.3.1

jay@moduscreate.com
8 Jun 2011, 5:59 AM
Moved to Ext 3. help.

You should be using a remote data set with your grid panel. Look at the pagination examples!

Sapan
8 Jun 2011, 6:02 AM
Thanks for your time. But can you describe a little more about it.

skirtle
10 Jun 2011, 2:23 AM
You need to define a proxy on your store. Usually this will be an HttpProxy, created using the url config parameter. This proxy is used by the store to load the data. In the case of paging it will pass parameters to the proxy giving details of which page of data it wants: these parameters must be interpreted appropriately by the server responding to the requests of the proxy.

ajanelisha
10 Jun 2011, 2:48 AM
Thanks Skirtle. that was really helpful.