ExtJS 4 - How to load grid store with its params carrying latest values from a form?

Question

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.

I have been able to resolve the first issue by using 'beforeload' event of store. Now I am passing the parameters to the proxy extraparams in beforeload event and they are taking the latest values. But would definitely like to know about the handlers for paging toolbar buttons if someone could guide at them. Thanks again. — netemp
I am at v4, sorry I should have mentioned it in the question body too, along with the title of question. — netemp
you shouldn't need any special handling for the paging toolbar. because the user generated events on paging toolbar will in turn cause store's 'beforeload' to be fired which you have covered. — Amol Katdare
NetEmp you should write your solution in a short answer and mark it so this question is closed. — mistaecko
@amol: True that beforeload would take care of every store load, but in general, if we have a to write a handler for paging toolbar icons then how can that be done? Any clue? — netemp

Francisco Javier Francisco Javier · Accepted Answer · 2012-07-05T15:41:25

yourStore.on('beforeload',function(store, operation,eOpts){
        operation.params={
                  status:cmbStatus.getValue(),
                  value:txtBuscarPor.getValue(),
                  empresa:'saasd',
                  app:'dsads'
            };

},this);

ExtJS 4 - How to load grid store with its params carrying latest values from a form?

3 Answers