Grid filtering based on drop down value

Question

I have a html drop down and an extjs grid.

I want to implement searching functionality using the drop down...

The ext grid has to show the records based on the selected value of the drop down. and the grid has paging also...

I implemented this like

In drop down change event i'm loading store with the search parameters

searchGrid.store.load({params:{start:0, limit:10, year: searchVal}});

This works fine for the first page.. Grid shows records according search params....

But when i click the next page button in paging bar.... search params are missing....

how to handel this....

Is there any other way to implement this kind of search... Help thanks.

Amol Katdare Amol Katdare · Accepted Answer · 2011-03-25T18:33:34

Welcome to SO

Add a beforeload handler to the store that initializes the params everytime the store needs to be loaded (whether by user selecting a dropdown value or click the next button)

Your code would be something along the lines of -

Ext.onReady(function() {
    //...some initialization code
    Ext.getCmp('your-grid-id').getStore().on('beforeload', function(store, options){
        options.params.year=Ext.getCmp('your-combo-id').getValue();
    });
    //....some more initialization code
});

If your combo does not always a value (for example, if it does not have a default value when it is loaded, you will have to modify options.params.year=Ext.getCmp('your-combo-id').getValue(); accordingly.

Grid filtering based on drop down value

1 Answers