PDA

View Full Version : Paging tool bar - cannot prescribe listings per page



Premlal
29 Dec 2011, 5:49 AM
I have trouble with breaking out a set number of listings per page. I have placed the 'paging tool bar' in the grid panel but my display is showing all the records (200 in my case) in all the page displays. I don't know if I am missing anything.

mitchellsimoens
29 Dec 2011, 11:52 AM
Is your store sending the paging params? Are you returning all records or just one page at a time?

Premlal
30 Dec 2011, 4:32 AM
Presently the display grid is loaded automatically after it retrieves the entire set of records from database. I was hoping to control the display by using a paging toolbar. No I did not set any specific parameters. Can you give me a pointer how I can do this. That may be the problem.

mitchellsimoens
30 Dec 2011, 6:02 AM
Yes, paging cannot be done if you returned the entire data set. You should only return one page at a time and the response should be like:


{
"success" : true,
"total" : 200,
"data" : [...]
}

total is how many rows exists totally. data can be named whatever and will only return the one page of results. You will need to specify the root config on the reader to whatever you put as data.

Premlal
1 Jan 2012, 11:05 PM
Components:


MyContainerUi = Ext.extend(Ext.Container, {
height: 250,
width: 400,


initComponent: function() {
Ext.applyIf(this, {
items: [
{
xtype: 'editorgrid',
height: 814,
width: 1447,
footer: true,
hideCollapseTool: true,
title: 'My Grid',
autoExpandMax: 50,
store: 'MyStore1',
columns: [
{
xtype: 'numbercolumn',
align: 'right',
dataIndex: 'lngSnailID',
header: 'LngSnailID',
sortable: true,
width: 100,
format: '000',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'varFrom',
header: 'VarFrom',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'lngCarrierID',
header: 'LngCarrierID',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
}


],
bbar: {
xtype: 'paging',
width: 400,
displayInfo: true,
pageSize: 50,
store: 'MyStore1'
}
}
]
});


MyContainerUi.superclass.initComponent.call(this);
}
});






Data Stores :


MyStore1 = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
MyStore1.superclass.constructor.call(this, Ext.apply({
autoLoad: true,
baseParams: {
start: '0',
limit: '50'
},
paramNames: {
start: '0',
limit: '50',
sort: 'lngSnailID'
},
sortField: 'lngSnailID',
storeId: 'MyStore1',
url: 'data/test.php',
root: 'results',
fields: [
{
mapping: 'lngSnailID',
name: 'lngSnailID',
type: 'int'
},
{
mapping: 'varFrom',
name: 'varFrom',
type: 'string'
},
{
mapping: 'lngCarrierID',
name: 'lngCarrierID',
type: 'string'
}
]
}, cfg));
}
});