PDA

View Full Version : Grid paging with change parameter /paging issue



thomsonzh
28 Oct 2011, 12:09 PM
I have a window with a search form at the top and grid at the bottom.
User can enter values in the search form and click button - Get Records.
At the click of this button, I load the store of the grid by passing the values in form fields as parameters in following way:

store.load({
params:{
key1:Ext.getCmp('field1').getValue();
}
});
I tried giving parameters in the store proxy itself, but it unfortunately always takes up initial values (values when the form is rendered) and not the latest one entered by the users in the form fields. Following is the method I used for assigning values to params while creating the store:

extraParams:{
key1:Ext.getCmp('field1').getValue();
}
I wanted to seek guidance at two things:
a. While defining a store, can I ensure that store takes latest/current values from the form fields before querying server, so that I don't have to provide these values while calling load function?
This becomes more necessary as I have a paging toolbar at the bottom which carries a refresh button (along with next, last, previous, first icons for navigation).
Now, whenever user clicks at refresh (or any navigation icon), the store gets loaded without the query parameters.
Thus the second thing is:
b. If the answer of 'a' is that - Pass the latest values to parameters manually when calling load function - then how can I write the handler for 'refresh' button and navigation icons (that is, next, last, previous and first) in the paging toolbar, so that I can pass the latest form values to load function.
Thanks for any help in advance.
PS: I am using ExtJS 4.

ldonofrio
29 Oct 2011, 9:50 AM
add a listener to the beforeload event on the store, you can change the extraParams array there......

thomsonzh
29 Oct 2011, 2:03 PM
Could you please give me a sample? I use MVC structure. Data store generate in the controller. I create a search button and start/end date time picker in the view. When I click search button, grid show the search result in paging grid. when I use next page button . the grid view go back to get whole data.

function btnsearchdate(){

ds.on('beforeload', function(ds){ ds.extraParams= {from_date: strStart,to_date: strEnd};})
ds.load();
}

Thanks

mrfr0g
29 Oct 2011, 9:10 PM
Hi,

You wouldn't define the beforeLoad event handler during the click event of the button, you would define it during the creation of your store.



var store = Ext.create('Ext.data.Store', {
#storeParameters...#,
listeners : {
beforeLoad : function() {
this.extraParams = {some:extraParams};
}
}
});


With this code, the beforeLoad event handler will be fired when the user clicks the Refresh button, or you manually call the load method on the store. This particular method will assign the value of 'extraParams' on the store to be '{some:extraParams}'.

completej
18 Jan 2012, 1:48 PM
Hate to necro post but, would it be possible to do the following?




var store = Ext.create('Ext.data.Store', {
#storeParameters...#, listeners : { beforeLoad : function() { this.extraParams = Ext.getCmp('dh-search').getForm().getValues(); } }});where 'dh-search' is a form that is *not yet rendered*?

The answer is no, but I'm looking for a way around it. I have a paging tool bar that needs values from the accompanying form, but I am building the store before it is rendered. I am finding the paging tool bar not sending the params correctly to the store, but I am unwilling to use extraParams and a manual parameter setting due to the nature of the receiving .asp file.

Not sure if that is clear or not.

mrfr0g
18 Jan 2012, 2:13 PM
I think your best option is to just detect if the form exists before trying to access it within beforeLoad. The test will likely fail the first time because the form isn't rendered, but the next time the store loads it should be able to find and get the values from that form.



...
beforeLoad: function () {
var form = Ext.getCmp('dh-search');
if(form && form.rendered) {
this.extraParams = form.getForm().getValues();
}
}

completej
19 Jan 2012, 9:29 AM
fr0g, I owe you one, thank you. Such a simple idea and I cruised right over it. One slight change to get it to function as intended. I owe you a beer if you ever come near San Antonio, thanks again.



,listeners:{
beforeLoad:function(){
var form = Ext.getCmp('dh-search');
if(form && form.rendered){
this.proxy.extraParams = form.getForm().getValues();
}
}
}

mrfr0g
19 Jan 2012, 11:05 AM
Happy to help :)

jlim
1 Mar 2012, 6:32 PM
Hi, I'm having a similar issue. In the store, I've added the extraParams as such:


listeners: {
beforeload: function(store,options) {
store.proxy.extraParams.criteria = Ext.getCmp('myformelementhere').getValue();
}
}

The grid gets filtered, but paging never works after that. I can click on the next button and it always show start=0, limit=50 (which is what I set), page=1,2,3,4 etc. (increasing as I click Next Page).

However, if I don't apply an extra param, the paging works. What am I doing wrong? I've confirmed the server upon filtering is sending back the filtered results with the right total number of records. But because start is always stuck at 0, it never got the next set back.

Thanks.

mrfr0g
1 Mar 2012, 6:47 PM
Hey jlim,

It's difficult to determine based on that sample code. I would examine the request headers with a request that includes the extra parameters and one that does not. I believe the store also requires the response to have some specific properties.

jlim
1 Mar 2012, 6:57 PM
Do you know what specifically the server needs to send back to the store that is different in the event of filtering? If without filter, say I have 100 records and I'm paging by 25 records, so I have 4 pages. Now, if I filter by something and the server returns 50 records and I have 2 pages. I have confirmed that the total records property is set to 50, but only returning 25.

The problem I'm having is when I click Next, the "start" value never changes per firebug. It always remain at 0 while page is increasing.

mrfr0g
1 Mar 2012, 7:04 PM
I believe the server needs to return, 'success' (true|false), 'results'(Count of results), 'root'. You should give the paging toolbar documentation a look over, http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Paging.

jlim
1 Mar 2012, 7:15 PM
This is weird. Here's what console.log(options) shows:


Object { page=4, start=150, limit=50, more...}

but firebug shows my query string as:


http://localhost:9901/search.pl?_dc=1330657714375&criteria=somecriteriahere&query=somequerystringhere&start=0&page=4&limit=50


A bit more info. I've a grid with a search field (query) and a selection list (criteria). Searchfield is tie back to the same store as grid. The only issue I'm having is "start=0" no matter what page I'm on.

Am I expected to maintain "start=xxx" on my own if I'm applying some sort of filtering?? I've tried setting the start value and it does take it. I thought the paging toolbar does this automatically (which it does for me if I don't filter).

Thanks.

mrfr0g
1 Mar 2012, 7:21 PM
I dont believe you are expected to maintain the start property, but it relies on having a count of the remaining items. Given that the options object is different from the final request, I would say that something is overriding the proxy generated url. It looks like page and limit came through, but start was reset to zero. It may be helpful to step through a debugger line by line until you find where it's being reset :/.

chandan.behura
7 Oct 2012, 9:38 PM
Could you please give me a sample? I use MVC structure. Data store generate in the controller. I create a search button and start/end date time picker in the view. When I click search button, grid show the search result in paging grid. when I use next page button . the grid view go back to get whole data.

function btnsearchdate(){

ds.on('beforeload', function(ds){ ds.extraParams= {from_date: strStart,to_date: strEnd};})
ds.load();
}

Thanks

Hi thomsonzh,
I am also facing the same issue in pmy grid pagination. Did u solved ur problem.Please helep me if u have done.