Reseting ExtJS 2.1 GridView column sorting
Reseting ExtJS's GridView column sorting can be a bit tricky - the API doesn’t provide any way to do this. So we have to cook our own way.
To reset sorting state first we need to extend the Ext.grid.GridView class:
Ext.override(Ext.grid.GridView,
{
// private
_resetSortState: false,
resetSortState: function()
{
this._resetSortState = true;
},
updateHeaderSortState: function()
{
if (this._resetSortState === true)
{
this._resetSortState = false;
delete this.ds.baseParams['dir'];
delete this.ds.baseParams['sort'];
delete this.sortState;
this.mainHd.select('td').removeClass(this.sortClasses);
this.grid.fireEvent('sortchange', this.grid, null);
}
else
{
// ExtJS updateHeaderSortState function
var state = this.ds.getSortState();
if(!state){
return;
}
if(!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)){
this.grid.fireEvent('sortchange', this.grid, state);
}
this.sortState = state;
var sortColumn = this.cm.findColumnIndex(state.field);
if(sortColumn != -1){
var sortDir = state.direction;
this.updateSortIcon(sortColumn, sortDir);
}
}
}
});
Include this snippet in your application. How to use it? I hooked it to my Ext.Toolbar.Button handler:
new Ext.Toolbar.Button(
{
text: 'My Toolbar Button',
handler: function()
{
myGrid.view.resetSortState();
myStore.removeAll();
myStore.load({params : {start : 0}});
},
scope: this
}));
That’s it! This code has been tested with ExtJS 2.1.