ExtJS: Ext.grid.Panel: how to keep sort order after store.sync()?

Question

I have a nice working Ext.grid.Panel, with column headers you can click on to "automatic" sort. The store has "autoSync: true". I have a button "new", when the user clicks on it, it creates an empty record without the id property:

onAddClick: function(){
    this.down('#new').setDisabled(true);
    var rec = new GroupeSynergies.data.Partenaire({
        /* Valeurs par défaut des colonnes */
        description: 'Nouveau partenaire'
    });
    this.store.insert(0, rec);
},

I insert the record in the #0 position, because I know that it'll be automatically synced (and that's what's happening actually). The problem is: if you click on the "id" column, it's sorted by id asc, if you click again, reverse order.

Then you click on the button "New", it creates empty new record, sends it to the server, and gets the resulting record with the id field completed, updates the grid, but... don't take in account the sort: when it's synced, the returned id is very high and it stays on the top, no matter what the sort order is. What am I doing wrong?

Thank you very much

(PS I'm asking at stackoverflow because Sencha's forum seems to be overwhelmed)

Answer 1

In a similar situation, the solution I've found is to add a store.sort in the 'write' event handler of the store.

Ext.application({

    (...)

    launch: function() {

        var myStore = this.getStore('myStore');
        myStore.on('write', function(store, operation){ store.sort('id','ASC') }; );

    }

});

Adapt the sorting parameter to your needs. Documentation for the 'sort' method.

If you have a writer set on the proxy of your store, the sorting will also fire for a simple "update". To avoid this situation you can test the value of the operation parameter. Documentation for the 'write' event.

I don't know if it is the better way of doing it, it's the only one I've found for now.

Answer 2

Here's another solution:

Ext.define('My.data.Store', {
    extend: 'Ext.data.Store',

    sortOnWrite: false,

    resort: function () {

        var me = this;

        me.doSort(me.generateComparator());
    },

    onProxyWrite: function (operation) {

        var me = this;

        if (me.sortOnWrite && operation.wasSuccessful()) {

            me.resort();
        }
    }
});