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.

Answer 1

A possible solution for this is to use ‘beforeload’ event of the store and provide the list of parameters in it. This way, whenever the store is loaded, then its beforeload event is fired and the values picked up are always the latest. Hope this helps someone looking for something similar.