PDA

View Full Version : GridPanel and Paging toolbar



alane
27 Sep 2012, 11:07 AM
I'm using a grid panel within a fieldset that's supposed to have a paging toolbar and page size restrictions on the grid.

{
xtype: 'fieldset',
columnWidth: 1,
autoRender: true,
hidden: false,
id: 'ProductListings',
layout: {
type: 'column'
},
title: 'Products:',
items: [
{
xtype: 'gridpanel',
columnWidth: 1,
autoRender: true,
title: '',
titleCollapse: true,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,
forceFit: true,
store: 'GProdStore',
columns: [
{
xtype: 'gridcolumn',
draggable: false,
dataIndex: 'PLC',
hideable: false,
text: 'Product Line Code'
},
{
xtype: 'gridcolumn',
draggable: false,
dataIndex: 'RPN',
hideable: false,
text: 'RPN'
},
{
xtype: 'numbercolumn',
dataIndex: 'GPN',
text: 'GPN',
format: '0'
},
{
xtype: 'gridcolumn',
draggable: false,
width: 200,
dataIndex: 'PN',
hideable: false,
text: 'Product Name'
}
],
viewConfig: {
simpleSelect: true
},
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: 'GProdStore',
items: [
{
xtype: 'combobox',
width: 120,
value: '20',
fieldLabel: 'View',
labelWidth: 40,
editable: false,
store: 'PagingStore',
displayField: 'paging',
itemId: 'PageViews',
valueField: 'page_value'
}
]
}
],
selModel: Ext.create('Ext.selection.CheckboxModel', {

})
}
]
}
I set the pageSize in the store GProdStore just as it was shown in the example.

Ext.define('MyApp.store.GProdStore', {
extend: 'Ext.data.Store',

requires: [
'MyApp.model.GprodModel'
],
var paging = 10;
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
storeId: 'GProdStore',
pageSize: paging,
model: 'MyApp.model.GprodModel',
proxy: {
type: 'ajax',
url: 'data/GProd.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});
The paging toolbar is visible on the grid. It shows 'Displaying items 1 to 10' just as expected. The problem is that the grid shows a lot more than 10 items.

I know I must be missing a configuration somewhere, but I'm at a loss to find it using the online example.

I appreciate any direction you can give.

scottmartin
27 Sep 2012, 1:11 PM
You are using a static JSON file. You need to return only the record you want to view.

Assuming you have 100 records in your table ...
You would return 10 records from your SQL and send the totalCount of 100.
SELECT .. LIMIT 0,10 (for page 1), etc

You would also specify the pageSize in your toolbar.

This would give you what you are looking for. Are you connecting to a DB?

Here is a quick example in PHP:
http://www.sencha.com/forum/showthread.php?229457

Scott.

alane
27 Sep 2012, 1:42 PM
So, if I were to change this to a local store that I pass a data array object to, it would automatically do the paging for me?

{I was only using an external json file for ease of access to a large dummy data set. The long term plan was to use dwr to obtain a dataobject that the application would manipulate between various stores.}

scottmartin
27 Sep 2012, 3:06 PM
For local data, have a look at:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.data.PagingMemoryProxy

Scott.