Question

I have a buffered grid on which I’ve implemented a local sort function (client side). I would like to remove the sort indication (darker background and little arrow) on the column header when the store reloads.

Does anyone know how to accomplish this in 4.1?

To make this clearer:

I want my columns to be sortable. I do not want them to initialize with sorting disabled. Users should be able to click the header and sort it all they want. But, what I want is to be able to turn off the sort programmatically. I.e., remove any sort classes that were applied from user clicks (things like the darker background and the little sort direction arrow).

The reason I would do this is because I am using a modified buffered store which allows me to do local sorting (client-side) with all of the buffered data (not just the chunk that is displayed). Normally, using a buffered store will make local sorting disabled because it would only sort the data that is displayed in the grid – not all of the data in memory, so the guys at Sencha made any grid that has a buffered store automatically disable local sorting – only remote sorting works. Well, as I said, mine is modified so it will work – but then when this buffered store reloads with new data from the database it does not enjoy the handy sortOnLoad feature normal grids get as a matter of course. In my use-case it is more logical to remove the sort state than it is to override the sortOnLoading functionality and make it apply the same sort to the new data, hence, this question.

I do have it worked out now, I’ll post an answer shortly along with my implementation of a buffered store with local sorting, in case anyone is interested and for my own future reference.

I should also point out that I am very aware of the client-side performance penalties that come with local sorting on a store that would need to be buffered (as opposed to just using remote sorting of the data on the server). I am aware that this is probably why Sencha does not support local sorting on their buffered stores. I have assessed all of the pros and cons to this and in my specific use-case it is the most sensible thing for me to do.

Answer 1

Buried deep in the dom there is a setSortState function on the Ext.grid.header.Container class and on the Ext.grid.column.Column class. These don’t show up anywhere in the 4.1.0 docs but they’re in the code nevertheless.

You can look at these functions yourself to get a complete concept of what they do, but the gist of both them is a switch statement that looks for either a 'DESC', 'ASC' or a null in the first argument, e.g.:

setSortState(`DESC`);
setSortState(`ASC`);
setSortState(null);

Calling either the header version or the column version of this function with a single null argument will remove the sort classes on a column. The only real difference is that the header version looks at the grid’s store to find the active sorter in the store’s sorters property and then uses that data to determine which column to call this function on – the column version simply runs off the column object that it is called from.

In my use-case I don’t add a sorter to the store sorters property so I am using the column version (i.e. calling setSortState from an Ext.grid.column.Column object).

First, here is an example of my implementation of a buffered store that allows local (client-side) sorting:

Ext.define('MyApp.store.TheBufferedStoreWithLocalSorting', {
    extend: 'Ext.data.Store',
    requires: [
        'Ext.ux.data.PagingMemoryProxy',
        'Ext.util.MixedCollection'
    ],
    model: 'MyApp.model.SomeModel',
    buffered: true,
    pageSize: 100,
    remoteSort: true, // this just keeps sorting from being disabled
    proxy: {
        type: 'pagingmemory',
        reader: 'json'
    },
    /* 
     * Custom sort function that overrides the normal store sort function.
     * Basically this pulls all the buffered data into a MixedCollection
     * and applies the sort to that, then it puts the SORTED data back
     * into the buffered store.               
     */                    
    sort: function(sorters) {
        var collection = new Ext.util.MixedCollection();

        collection.addAll(this.proxy.data);
        collection.sort(sorters);
        this.pageMap.clear();
        this.getProxy().data = collection.getRange();
        this.load();

    }
});

Now, to answer my question, to remove the sorter classes whenever the store reloads I just need to do this:

Ext.each(myGrid.columns, function(column, index) {
    if (column.hasCls('x-column-header-sort-ASC') ||
        column.hasCls('x-column-header-sort-DESC')) {
        myGrid.columns[index].setSortState(null);
        return false;
    }
});