PDA

View Full Version : GridPanel Paging problems



Hylinn
18 Nov 2009, 2:45 PM
I am trying to create a GridPanel with a PagingToolbar. The store for the GridPanel is created after the GridPanel itself is rendered. The PagingToolbar and GridPanel show up nicely when the store is loaded and everything is rendered. The only problem is that all the records of the data are shown. The PagingToolbar recognizes that there should be several pages and that all of the records of the data are being shown at once. When moving to another page the PagingToolbar shows that I am viewing (((page - 1) * 25) + 1) to (number of records + ((page - 1) * 25)).

Here is my code for the GridPanel:



Ext.ns('NSTJ.panel.component');
NSTJ.panel.component.ResultGrid = Ext.extend(Ext.grid.GridPanel, {
constructor: function(config) {

var emptyStore = new Ext.data.JsonStore({});

config = Ext.apply(config, {
columns: [],
border: false,
stripeRows: true,
store: emptyStore,
columnLines: true,
bbar: new Ext.PagingToolbar({
store: emptyStore,
displayInfo: true,
pageSize: 25,
displayMsg: 'Displaying Records {0} - {1} of {2}'
})
});

NSTJ.panel.component.ResultGrid.superclass.constructor.call(this, config);
},
setData: function(object) {

fields = new Array();
headers = new Array();

for (var i = 0; i < object.length; i++)
{
delete object[i].ExtensionData;
}


i = 0;
for (var name in object[0])
{
qtipTpl = new Ext.XTemplate(
'<h3>{name}</h3>',
'<tpl for=".">',
'<div>{value}</div>',
'</tpl>'
);
fields[i] = name;
headers[i] = {
header: name,
sortable: false,
menuDisabled: true,
width: 50,
tooltip: name,
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
var qtip = qtipTpl.apply({value: value, name: fields[colIndex]});
return '<div qtip="' + qtip + '">' + value + '</div>';
}
};

i++;
}

store = new Ext.data.JsonStore({
autoDestroy: true,
fields: fields,
data: object,
autoLoad: {
params: {
start: 0,
limit: 25
}
},
proxy: new Ext.data.MemoryProxy(object)
});

colModel = new Ext.grid.ColumnModel({
columns: headers
});

this.reconfigure(store, colModel);
this.getBottomToolbar().bind(store);

Ext.MessageBox.hide();
}
});
Ext.reg('resultgrid', NSTJ.panel.component.ResultGrid);