Paging grid

[kliolios]

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
Dino

[kliolios]

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
Dino

[stevil]

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';
myStore.load();

hope this helps,

stevil

[kliolios]

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.

Cheers
Dino

[kliolios]

I thought this was going to take care of it:
store.load({
params:{
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):

store.loadPage(1);



Hope this helps.

D.

[kliolios]

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.

D.

[kliolios]

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?

Dino

[stevil]

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.

stevil

[kliolios]

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.

Cheers
Dino

[kliolios]

Problem solved. Apparently in ext JS 4 you have renamed baseParams to extraParams.

D.