PDA

View Full Version : Paging is not working



lander
30 Dec 2010, 4:41 AM
I have a window made with ext designer.
The window contains a grid with paging, and a form.
The form is a search form, results were displayed in the grid when the user presses the search button.
But my paging does not work, my store is right, because the total number of records is correct.
Anyone have an idea why my paging does not work? (this is not all code)



MyWindowUi = Ext.extend(Ext.Window, {
title: 'Search parcel per station',
id: 'myWindow',
width: 700,
height: 303,
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'grid',
title: '',
store: 'parcelStore',
id: 'grid',
region: 'center',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'parcel_id',
header: 'parcel id',
sortable: true,
width: 100
},
...
...
],
bbar: {
xtype: 'paging',
id: 'pagingToolbar',
store: 'parcelStore',
displayInfo: true
}
},
{
xtype: 'form',
title: '',
region: 'east',
width: 300,
frame: true,
name:'parcelForm',
id:'parcelForm',
items: [
{
xtype: 'textfield',
id: 'parcelId',
fieldLabel: 'Parcel ID',
name: 'parcelIdField',
anchor: '100%',
vtype: 'validParcelId'
},
...
...
{
xtype: 'button',
text: 'Search',
type: 'submit',
tooltip:'Search parcel per station',
handler: function(button, event) {
var formPanel = Ext.getCmp('parcelForm');
myParcelStore.reload({
params: formPanel.getForm().getValues()
});
}
}
...
...
}
parcelStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
parcelStore.superclass.constructor.call(this, Ext.apply({
autoLoad: true,
remoteSort: true,
storeId: 'parcelStore',
url: '/immob/search-parcel-data/language/<?php echo $this->language; ?>/',
root: 'rows',
totalProperty: 'total',
fields: [
{
name: 'parcel_id'
},
{
name: 'parcel_name'
},
{
name: 'parcel_builder_owner'
},
{
name: 'parcel_surface'
},
{
name: 'parcel_type'
}
]
}, cfg));
}
});
var myParcelStore = new parcelStore();

Condor
30 Dec 2010, 4:54 AM
1. Your pagingtoolbar is missing a 'pageSize' config option.
2. The store should be configured with:

autoLoad: {params: {start: 0, limit: 10}}
(assuming the pageSize is 10)

lander
30 Dec 2010, 6:36 AM
I think this is a piece of the solution.
When I click the button on the form, all parameters of the form passed to the server.
See code handler by xtype button.


handler: function(button, event) {
var formPanel = Ext.getCmp('parcelForm');
myParcelStore.reload(
params: formPanel.getForm().getValues()
});
}

When I click on the paging, I also need those parameters. How can I do this?

Condor
30 Dec 2010, 6:41 AM
Use baseParams to store any additional parameters, e.g.

handler: function(button, event) {
var formPanel = Ext.getCmp('parcelForm');
Ext.apply(myParcelStore.baseParams, formPanel.getForm().getValues());
myParcelStore.load({
params: {
start: 0,
limit: 10
}
});
}
(and you don't want to reload - you want to start at the first page again)

lander
30 Dec 2010, 6:47 AM
This code must be added by bbar?

Condor
30 Dec 2010, 7:05 AM
This code must be added by bbar?

???