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

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 guidanc开发者_高级运维e 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.

---

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

},this);

---

Related to your question (b) (and because you especially asked for this in the comments section):

I see only one standard way to hook into the PagingToolbar button handlers which is very limited.

Ext.toolbar.Paging fires a 'beforechange' event before it actually changes the current page. See API docs. A listener that returns false will stop the page change.

All other methods require extending Ext classes which wouldn't be a problem if the ComboBox would make it easier to use your own implementation of BoundList (which is the class that renders the dropdown) or pass through config parameters to BoundList resp. the paging toolbar.

I tried to bring this lack of flexibility up on the Ext message board once but was pretty much ignored.

---

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.