Clear the Search Text field in LiveSearchGridPanel

Question

We are using the LiveSearchGrid Panel in ExtJS 4.2.1 similar to the example below, with Pagination. When the user searches for a record in one page, and then goes to another page, the search text field is NOT cleared, and clicking on the next or previous buttons show some random results (which are based the previous search). How can I clear this Search Text Field in the LiveSearchGridPanel?

http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/live-search-grid.html

I looked into the API documentation of LiveSearchGridPanel, but it does not provide an easy handle to the Search Text Field.

Answer 1

Add a listener on the beforechange event of the paging toolbar. Something like this:

{
    xtype: 'pagingtoolbar',
    // ...
    listeners: {
        beforechange: function() {
            this.up('grid').down('textfield[name=searchField]').setValue('');
        }
    }
}