PDA

View Full Version : Paging toolbar doesn't refresh gridpanel display



wceuppens
23 Jul 2010, 9:54 PM
I have a gridpanel with a paging toolbar. When I use the paging buttons, I receive a post with the correct data, but the gridpanel does not refresh with the new data...

Ext.ns("TPL.gridpanel");
TPL.gridpanel.algemeen_log = Ext.extend(Ext.grid.GridPanel, {
viewConfig : { forceFit : true },
initComponent : function() {
this.columns = this.buildColumns();
this.store = this.buildStore();
this.bbar = this.buildBbar();
TPL.gridpanel.algemeen_log.superclass.initComponent.call(this, arguments);
},

buildColumns : function() {
return [
{
header : this.i18n.Cid,
dataIndex : 'id',
width : 50,
align : 'right',
sortable : true,
hidden : true,
resizable : false,
renderer : colorTextBlue
}, {
header : 'description',
dataIndex : 'uitleg',
id : 'centre1.log.textCol',
sortable : false,
hidable : false
}
];
},

buildStore : function() {
return {
xtype : 'jsonstore',
autoLoad : true,
fields : ['id', 'uitleg'],
url : 'php/base.centre1.log.log.php',
totalProperty : 'totalCount',
root : 'records',
remoteSort : true,
baseParams : {start: 0, limit: 50}
};
},

buildBbar : function() {
return [{
xtype : 'paging',
store : this.store,
pageSize : 50,
displayInfo : true
}];
},

});
Ext.reg('TPL.gridpanel.algemeen_log', TPL.gridpanel.algemeen_log);The strange thing is that if I put the store outside of my class, the paging works correctly:

Ext.ns("TPL.gridpanel");

TPL.gridpanel.testStore = new Ext.data.JsonStore({
fields : ['id', 'uitleg'],
url : 'php/base.centre1.log.log.php',
totalProperty : 'totalCount',
root : 'records',
autoload : false,
remoteSort : true,
baseParams : {start: 0, limit: 50}
});


TPL.gridpanel.algemeen_log = Ext.extend(Ext.grid.GridPanel, {
viewConfig : { forceFit : true },
initComponent : function() {
this.columns = this.buildColumns();
this.store = TPL.gridpanel.testStore;
this.store.load();
this.bbar = this.buildBbar();
TPL.gridpanel.algemeen_log.superclass.initComponent.call(this, arguments);
},

buildColumns : function() {
return [
{
header : this.i18n.Cid,
dataIndex : 'id',
width : 50,
align : 'right',
sortable : true,
hidden : true,
resizable : false,
renderer : colorTextBlue
}, {
header : 'description',
dataIndex : 'uitleg',
id : 'centre1.log.textCol',
sortable : false,
hidable : false
}
];
},

buildBbar : function() {
return [{
xtype : 'paging',
store : this.store,
pageSize : 50,
displayInfo : true
}];
},

});
Ext.reg('TPL.gridpanel.algemeen_log', TPL.gridpanel.algemeen_log);Do I miss a configuration option? I've looked in the API doc and googled, but found no answer...

Condor
25 Jul 2010, 5:31 AM
1. Do not put start and limit in baseParams. Put them in autoLoad or load().
2. You are using the store config object instead of the real store instance in the pagingtoolbar config object.

wceuppens
27 Jul 2010, 11:27 AM
1. Do not put start and limit in baseParams. Put them in autoLoad or load().
2. You are using the store config object instead of the real store instance in the pagingtoolbar config object.
1. Did that, the results are the same;
2. Now this reply baffles the debutant I am...
--> I thought I was using the gridpanels's config object. Wrong?
--> How does one use the pagingtoolbar config object? It would be extremely helpful if you could elaborate a bit on that one...