View Full Version : Paging grid

17 Aug 2011, 2:54 PM
Hello everybody,

My name is Dino and this is my first post.I am trying to implement a grid panel with paging that is getting data from a paging PHP proxy script that resides on the same web domain. This works and the ajax proxy sends GET start and limit through the load() method. Is there a way to make it work with POST requests instead?

Thank you in advance

17 Aug 2011, 3:36 PM
I also noticed that extra params are passed only when you first load the page. Then if you click on another page, the extra parameters do not get submitted. I read the documentation for load but I am still not clear how I can pass extra params.

Thank you

18 Aug 2011, 6:27 AM
Do this after Ext JS loads, but before your first request:

Ext.override(Ext.data.proxy.Ajax, {
actionMethods: {
create: 'POST',
read: 'POST',
update: 'POST',
destroy: 'POST'

It will tell any Ajax proxy request to use POST for reads.

If you just want to do this on one particular store, you could try passing the actionMethods config above as part of your proxy config, or in code, before you load the store, you could do something like

myStore.proxy.actionMethods.read = 'POST';

hope this helps,


18 Aug 2011, 2:54 PM
Dear Stevil,

It most certaintly worked. However, I am still trying to figure out why I cannot go to the next page now that I am submitting more parameters than start and offset.


18 Aug 2011, 3:11 PM
I thought this was going to take care of it:
start: 0,
limit: itemsPerPage,
request: 'complete'

But if I click to next page then I just get Loading..
I am also trying to set the extra params at the store:
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'project',
autoLoad: false,
proxy: {
type: 'ajax',
url : '/PHP/proxy.php',
arams: {
request: 'complete'
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'

The extra parameter (request) gets passed only the first time the grid loads (as it is mentioned in the documentation):


Hope this helps.


18 Aug 2011, 3:26 PM
Finally here is my grid code:

var grid = Ext.create('Ext.grid.Panel', {
title: 'blah',
store: store,
columns: [
height: 500,
width: 1100,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
renderTo: 'topic-grid'

If I had a toolbar I would add a listener but I am not sure what to do with dockedItems.


18 Aug 2011, 4:49 PM
I even set baseParams on the store config according to http://www.sencha.com/learn/grid-faq/ but still no dice. Is there a way to add a listener and override the next/previous buttons?


19 Aug 2011, 5:57 AM
You should be able to invoke load() with the params object you specified. What I would do is breakpoint the setOptions method in Ext.data.Connection, and see what it's doing - are your params still in the options parameter, are they getting transformed into queryString, etc.


19 Aug 2011, 2:27 PM
Hi Stevil,

Not sure what you mean by invoke load. I assume that is done for me by the toolbar. From what I understand by default the next/previous/first/last buttons only send the start and limit parameters unless you specify the extra parameters in the store's baseParameters. (from extjs 4 FAQ) I have done that but my php proxy JSON script does seem to be accepting the extra params when I am trying to go to a different page. Only when the grid first gets loaded.


20 Aug 2011, 12:26 PM
Problem solved. Apparently in ext JS 4 you have renamed baseParams to extraParams.


24 Aug 2011, 8:22 AM
Can you please post the exact code you used, i am having the same issue. Setting extraParams in the proxy request did not work for me.

24 Aug 2011, 9:11 AM
Nevermind...got it. This is what worked for me in case anyone else is having issues.

in the data store add the listener beforeload and then set the extraParams

listeners: {
beforeload: function() {
store.proxy.extraParams = {param1: 1, param2: 2}