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)

score 4 · Accepted Answer · answered Oct 18 '11 at 14:01

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.

It seems it's not implemented yet, but your answer is a nice workaround. Thank you very much! — Olivier Pons, Oct 18 '11 at 16:32

score 1 · Answer 2 · answered Jul 03 '14 at 02:13

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();
        }
    }
});

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

2 Answers2