Help - How to remove sort field when reload grid

When I click on the column header to sort column and click reload button on paging toolbar, the column still keep sort. How can I reset it. Thanks

Add this line

stateful: false,
in new Ext.grid.GridPanel

Thanks v.sushma so much.
But the column still keep sort. I want reset it when grid is reloaded

Code:

---

delete myStore.sortInfo;

---

Example:

Code:

---

bbar: new Ext.grid.PagingToolbar({
  onClick: function(which) {
    if (which == 'refresh') {
      delete this.store.sortInfo;
    }
    Ext.grid.PagingToolbar.prototype.onClick.apply(this, arguments);
  }
  ...
})

---

Thanks Animal and Condor. The sortInfo now deleted successful. How can I reset the GUI ? I want to remove sort arrow on column header, too.

Yes, there's a bif of a gap here. You'll have to do it yourself:

Code:

---

myGrid.view.getHeaderCell(columnIndex).removeClass(["sort-asc", "sort-desc"]);

---

Add menuDisabled:true in columnFields.push

this.columnFields.push(
{dataIndex: 'PRODUCT', header: 'Product',sortable: true, width: 0,menuDisabled:true},

I think it's a bug.

GridView has (with my added comments in red):

Code:

---

    updateHeaderSortState : function(){
        var state = this.ds.getSortState();
        if(!state){  // It returns if no stort state found.
            return;  // If it used to have a sort state, the arrows need removing
        }
        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);
        }
    },

---

It should ensure all arrow classes are removed if no sort state is found in the Store.

I use such fix:

Code:

---

/**
 * Fix grid view to update "unsorted" state correctly
 */
fix(Ext.grid.GridView, {
        // original header sort state update handler
        updateHeaderSortState$: Ext.grid.GridView.prototype.updateHeaderSortState,

        // hacked header sort state update handler
        // private
        updateHeaderSortState: function() {
                if(this.ds.getSortState()) {
                        this.updateHeaderSortState$();
                        return;
                }
                if (!this.sortState) {
                        return;
                }
                delete this.sortState;
                this.mainHd.select('td').removeClass(this.sortClasses);
                this.grid.fireEvent('sortchange', this.grid, null);
        }
});

---

I hope this fix will be useful not only for me =)