PDA

View Full Version : Paging grid



kliolios
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
Dino

kliolios
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
Dino

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



hope this helps,

stevil

kliolios
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.

Cheers
Dino

kliolios
18 Aug 2011, 3:11 PM
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
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.

D.

kliolios
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?

Dino

stevil
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.

stevil

kliolios
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.

Cheers
Dino

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

D.

knashash
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.

knashash
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}
}


}