Clear grid's sort arrow icon

[SLerman]

I added a click handler to the paging toolbar's reset button (nice addition in 1.0, by the way) that changes the remoteSort to true and the sort column to 'default' to make it be a complete reset. It seems to work quite well, except that the arrow icon in the column header isn't cleared out after the grid reloads. Would this be considered a bug, or is there some function I can call manually to remove the arrow?

[jack.slocum]

There's no way for it to know that the sort changed unless you tell it. There are two ways, and if way 1 (below)doesn't work I will post a longer way that is sure to work.

grid.getView().updateHeaderSortState();

Note, this will only work if you actually updated the sortInfo property on the data store.

[SLerman]

Just calling that function doesn't work, since I'm setting the sortInfo.field to a non-existent column ('default', which is the order determined by the script that returns the data). I looked inside that function, though, and found the line that I need to just remove the arrow:

grid.getView().el.select(grid.getView().headerSelector).removeClass(grid.getView().sortClasses);

Not sure if changing updateHeaderSortState() to just remove the arrow if sortInfo.field doesn't exist is something you'd want to do.[/code]

[jack.slocum]

That was going to be my second suggestion.

Local variables are always a good idea.

// grid.getView().el.select(grid.getView().headerSelector).removeClass(grid.getView().sortClasses);

var view = grid.getView();
view.el.select(view.headerSelector).removeClass(view.sortClasses);

[petchia]

I am trying to programmatically reset a grid in EXT 2.0 using both of the methods mention in this thread and have not had any luck.

I noticed that the posts in this thread are quite old and am hoping there is a "newer, better" way to reset sort column headers programmatically.

Any ideas?

[Damian Ibbotson]

This worked for me:

grid.getView().updateHeaders();

[linuxguy2001]

Say you want to reset the grid data via a reset button located somewhere on your form, just add this handler to your button:

handler : function() {
                                myGrid = Ext.getCmp('mygrid_id');     
                                
                                // Removes any sorting done to the grid
                                delete myGrid.store.sortInfo;
                                
                                myGrid.store.reload({
                                                    params: {
                                                            start:0, 
                                                            limit: 150
                                                            }      
                                                                  }); 
                            }