Extjs中的行编辑插件问题

Question

I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below

My proxy model is:

Ext.define('proxymodel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int',
        persist: false
    }, {
        name: 'gender',
        type: 'auto'
    }, {
        name: 'name',
        type: 'auto'
    }, {
        name: 'age',
        type: 'int'
    }],

    identifier: 'sequential', // to generate -1, -2 etc on the client
    proxy: {
        type: 'rest',
        //format: 'json',
        //appendId: false,
        idParam: "id",
        //limitParam:"",
        //filterParam: "",
        //startParam:'',
        //pageParam:'',
        url: 'http://localhost:3000/posts',
        api: {
            read: 'http://localhost:3000/db',
            create: 'http://localhost:3000/posts',
            update: 'http://localhost:3000/posts',
            destroy: 'http://localhost:3000/posts'

        },

        headers: {
            'Content-Type': "application/json"
        },

        reader: {
            type: 'json',
            rootProperty: 'posts',

            totalProperty: 'total'

        },
        writer: {
            type: 'json'
        }
    }
});

In Application.js , I have defined row editing plugin as:

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
    listeners: {
        cancelEdit: function(rowEditing, context) {
            // Canceling editing of a locally added, unsaved record: remove it
            if (context.record.phantom) {
                store.remove(context.record);
            }
        },

        edit: function(editor, e) {
            // commit the changes right after editing finished
            e.record.commit();
        }
    }
});

And my store looks like:

Ext.define('Store', {
    extend: 'Ext.data.Store',
    storeId: 'peopleStore',
    pageSize: 500,

    //buffered: true,
    //leadingBufferZone: 300,

    pageSize: 5,

    autoLoad: {
        start: 0,
        limit: 5
    },
    autoSync: true,

    sorters: [{
        property: 'age',
        direction: 'ASC'
    }],

    groupField: 'gender'
});

Can anyone point out my mistake?

I have tried to reload my store after editing in 'edit' function of rowEditing but it didn't work.

Thanks for your time.

Answer 1

As full answer by request:

Have you tried Ext.data.StoreManager.lookup('peopleStore').reload() ?