Extjs 4.2 grid refresh loads old data

Question

I have a grid in Extjs 4.2, the store for it is configured as below.

var userStore = Ext.create('Ext.data.JsonStore', {
model: 'User',
proxy: {
    type: 'ajax',
    api: {
        create: '/pwbench/form/products/fctrmgmt/data.json',
        read: '/pwbench/form/products/fctrmgmt/data.json',
        update: '/pwbench/form/products/fctrmgmt/data.json',
        destroy: '/pwbench/form/products/fctrmgmt/data.json'
    },
    reader: {
        type: 'json'
    },
    writer: {
        type: 'json'
    }
},
autoLoad: true

});

Inside the grid, on clicking save I have the following configured.

handler: function() {
        var recordsArray = new Array();
        var dataRecords = new Array();
        recordsArray = grid.getStore().data.items;
        for (var i = 0; i < recordsArray.length; i++) {
            console.log(recordsArray[i].data);
            dataRecords.push(Ext.encode(recordsArray[i].data));
        }
        console.log(dataRecords.length);
        Ext.Ajax.request({
            url: 'mainpage.jsp',
            params: {
                records: dataRecords
            },
            success: function(response){
                var text = response.responseText;
                console.log(text);
                userStore.sync();
                userStore.load();

            }
        });

    }

I have a java class which is able to read the data sent by the ajax request and then I overwrite the data.json file which the store uses to fetch the data. The json file is overwritten without any issue, but the problem is that when I call userStore.load() after sync, it displays the old data, prior to making any changes. Even on refreshing the grid or refreshing the whole page it displays the old data, only when I refresh my entire project in Eclipse and reload the page, then it displays the new overwritten data.

Is this some cache problem? Can someone please tell me what is the issue?

inside success make the store to sync up. syntax is this.get<Storename>Store().sync(); it will help u. — Hariharan
For this, do I need to add some id to the store? Example, this.get('Storeid')Store().sync? I had even tried using, this.getStore().sync() inside success function, that resulted in an error saying, getStore is not defined for the object. — Arnav Sengupta
Hi user2380798 Refer sencha example, there you can able to understand. docs.sencha.com/extjs/4.2.0/#!/guide/application_architecture Not require storeid, it require storename — Hariharan
@Hariharan I have seen the architecture before, here they have a controller and added a button to it, and also created a new class definition for their store, however I am just creating an instance of the already available JsonStore in Extjs, therefore, I just use this.getStore().sync(), which fails saying getStore is not defined for the object, but if I use, userStore.sync() 'ONLY', then it shows the new data in the grid, but as soon as I refresh it or the page, it shows the old data. — Arnav Sengupta
IF you are using IE, check with developer tool and identify whether you can able to get store reference(userStore). All check what methods are avail for that store object(userStore). — Hariharan

Peter Kellner Peter Kellner · Accepted Answer · 2014-05-30T13:17:45

you should put the load in the success callback of the sync

userStore.sync({
        success: function() {
           userStore.load...

Extjs 4.2 grid refresh loads old data

1 Answers