extjs column sort & sort arrow icon

Question

I have a list of projects. When I click on a column header, the column is sorted and a sort arrow icon appears in the column header. However, the column keeps the sort and the sort arrow icon even after filtering the records (by entering text in the filter textfield and pressing the Filter button). I want the sort and the sort arrow icon to be removed from the column each time I filter the records. I have found some posts about clearing the sort arrow icon when a grid reloads (see links below). But how can I apply this to my situation? Any tips would be much appreciated.

http://www.sencha.com/forum/showthread.php?48437-Help-How-to-remove-sort-field-when-reload-grid

http://www.sencha.com/forum/showthread.php?3098-Clear-grid-s-sort-arrow-icon

Answer 1

In Ext JS 4.x you can just clear the sorters on the grid before you filter.

grid.store.sorters.clear();
grid.store.filter("name", "Lisa");

Here is a working fiddle:

http://jsfiddle.net/Vandeplas/5aKdc/

UPDATE:

if you don't filter/make a change you can force the UI to update by using:

grid.view.refresh();

Example: http://jsfiddle.net/Vandeplas/5aKdc/3/